ES6新特性之字符串的扩展实例分析


Posted in Javascript onApril 01, 2017

本文实例讲述了ES6新特性之字符串的扩展。分享给大家供大家参考,具体如下:

一、ES5字符串函数

concat: 将两个或多个字符的文本组合起来,返回一个新的字符串。
indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
charAt: 返回指定位置的字符。
lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。
match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。
substring: 返回字符串的一个子串,传入参数是起始位置和结束位置。
substr: 返回字符串的一个子串,传入参数是起始位置和长度
replace: 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
search: 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。
slice: 提取字符串的一部分,并返回一个新字符串(与 substring 相同)。
split: 通过将字符串划分成子串,将一个字符串做成一个字符串数组。
length: 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
toLowerCase: 将整个字符串转成小写字母。
toUpperCase: 将整个字符串转成大写字母。

二、ES6新增常用函数

传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

repeat(): 返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError
'na'.repeat(-0.9) // ""

参数如果是小数,会被取整(向下取整)。
参数是负数或者Infinity,会报错。
参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0。
参数NaN等同于0。

ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

如果省略第二个参数,则会用空格补全长度。

三、模板字符串

1. 多行字符串

传统的JavaScript语言,输出模板通常是这样写的。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

2.嵌入变量

模板字符串中嵌入变量,需要将变量名写在${}之中。

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

3.调用函数

模板字符串之中还能调用函数。

function fn() {
 return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

如果模板字符串中的变量没有声明,将报错。

如果大括号内部是一个字符串,将会原样输出。

`Hello ${'World'}`
// "Hello World"

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
详解JS函数防抖
Jun 05 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 #Javascript
ES6新特性之函数的扩展实例详解
Apr 01 #Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 #Javascript
ES6新特性之模块Module用法详解
Apr 01 #Javascript
Vue.js实战之组件之间的数据传递
Apr 01 #Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 #Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
15种PHP Encoder的比较
2007/03/06 PHP
mysql 字段类型说明
2007/04/27 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python实现简单多人聊天室
2018/12/11 Python
Django  ORM 练习题及答案
2019/07/19 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python表达式的优先级详解
2020/02/18 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Python调用C/C++的方法解析
2020/08/05 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
《陶罐和铁罐》教学反思
2014/02/19 职场文书
小学二年级学生评语
2014/04/21 职场文书
企业员工集体活动方案
2014/08/17 职场文书
治庸问责心得体会
2014/09/12 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
入党介绍人意见范文
2015/06/01 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python