【ES6系列】字符串扩展
1.字符串的遍历器
ES6 为字符串添加了遍历器接口,使得字符串可以被for...of
循环遍历
1 |
|
2.includes(), startsWith(), endsWith()
传统 JS 中字符串中只有 indexOf 方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 中提供了三种新方法:
- includes(): 返回布尔值,表示是否找到了参数字符串
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
1 |
|
这三个方法都支持第二个参数,表示开始搜索的位置。
1 |
|
上面代码中使用第二个参数 n 时,endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符,而其他两个方法针对从第 n 个位置直到字符串结束。
3.repeat()
repeat
方法返回一个新字符串,表示将原字符串重复n
次
1 |
|
4.padStart(), padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
1 |
|
padStart 和 padEnd 一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
1 |
|
如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
1 |
|
如果省略第二个参数,默认使用空格补全长度。
1 |
|
padStart 的常见用途是为数值补全指定位数。
1 |
|
另一个用途是提示字符串格式
1 |
|
这在我们统一处理一些固定格式的字符串或者生成一些固定格式的字符串时是很有帮助的。
5.模板字符串
我们在处理一些模板的操作时,往往会依赖于字符串拼接的方式来作为模板字符串来使用
1 |
|
ES6 中引入了模板字符串来简化解决这种问题
1 |
|
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
1 |
|
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
1 |
|
上面代码中,所有模板字符串的空格和换行,都是被保留的,比如
- 标签前面会有一个换行。如果你不想要这个换行,可以使用 trim 方法消除它。
- 第一个参数:[‘Hello ‘, ‘ world ‘, ‘’]
- 第二个参数: 15
- 第三个参数:50
1 |
|
在上面的例子可以看出,模板字符串中嵌入变量,需要将变量名写在${}
之中
1 |
|
另外,大括号内部还可以使用表达式,运算,调用函数以及对象属性引用等
1 |
|
模板字符串支持嵌套。
1 |
|
6.标签模板
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
1 |
|
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
1 |
|
上面代码中,模板字符串前面有一个标识名 tag,它是一个函数。整个表达式的返回值,就是 tag 函数处理模板字符串后的返回值。
tag 函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
tag 函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此 tag 会接受到 value1 和 value2 两个参数。
tag
函数所有参数的实际值:
一个简单的tag
函数的写法:
1 |
|
标签模板应用一:过滤 HTML 字符串
“标签模板”的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容,xss 攻击,常见的是在一些移动应用页面嵌套进入一恶意的代码,如微信红包等。
1 |
|
标签模板应用二:多语言转换(国际化处理)
1 |
|
下面引用 Jack Hsu 给出的一个完整的多语言转换Demo
1 |
|
7.String.raw()
String.raw 方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。
1 |
|
如果原字符串的斜杠已经转义,那么 String.raw 会进行再次转义。
1 |
|
String.raw 方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。
String.raw 方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有 raw 属性的对象,且 raw 属性的值应该是一个数组。
1 |
|
作为函数,String.raw 的代码实现基本如下。
1 |
|
8.总结
本次主要针对 ES6 中字符串方面的扩展进行了梳理,其中比较实用的,当属标签模板的应用:屏蔽非法注入以及多语言转换,都是前端开发过程中比较常见的问题。其他的一些新增方法也为我们提供了便利的处理。
- 本文作者:冷星
- 本文链接:http://lengxing.club/2018/07/03/%E3%80%90ES6%E7%B3%BB%E5%88%97%E3%80%91%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%89%A9%E5%B1%95/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!