【ES6】字符串的扩展

发表于   |   分类于   |     |  

ES6字符串扩展脑图

ES6在字符串变动了编码规则、新增了一些位置相关和查找字符串相关的api、新增模板字符串和标签模板

[TOC]

编码的变化

1、ES5中字符是用UTF-16表示，即1字符=16位=2字节，范围是0xFFFF
ES6中允许用4字节来表示1字符，即32位

  • 注意：这里将的是字符的编码，和JS中最大存储值不是一个概念，JS中所有数字都保存成64位float类型，正式的精确程度只能到53位二进制，超出这个范围的JS无法精确表示

2、新增码点相关api
(1)codePointAt(index)返回某个字符的码点：ES5的字符一般用2字节存储，ES6支持4字节的字符表示法，四字节的用codePointAt()读取整个字符，返回字符的码点
str.codePointAt(0)表示字符串str第一个字符,返回 32 位的 UTF-16 字符的码点
(2)String.fromCodePoint(码点) 将码点转换成字符：支持4字节的

新增api

1、与位置相关api
(1)at(index)返回index下标对应的字符：ES5 对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符
目前，有一个提案，提出字符串实例的at方法，可以识别 Unicode 编号大于0xFFFF的字符，返回正确的字符。

(2)for...of字符串遍历：

1
2
3
4
5
6
for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

(3)normalize()：用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化

2、新增查询字符包含与否的api
ES5里只有indexOf()可以来确定一个字符串是否包含在另一个字符串中，ES6新增了3中方法
(1)includes()：返回true/false，表示是否找到了参数字符串
(2)startWith()：返回true/false，表示参数字符串是否是在源字符串的头部
(3)endWith()：返回true/false，表示参数字符串是否是在源字符串的尾部

4、新增修改字符串的api
(1)str.repeat(次数)【不改变原字符串】；返回一个新字符串，表示将原字符串重复n次
(2)padStart()与padEnd()：补全字符串到规定的长度，这是ES2017新增的
strSource.padStart(长度，“用来补全的字符串”)
(3)matchAll()：matchAll方法返回一个正则表达式在当前字符串的所有匹配

模板字符串

1、模板字符串用反引号包裹起来
2、模板字符串中的变量用${变量或表达式或调用函数}表示
3、可以在模板字符串后用.trim()方法去掉换行、空格
4、模板字符串可以嵌套
5、使用<%= … %>输出 JavaScript 表达式

1
2
3
4
5
6
7
let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

标签模板

  • 标签模板不是模板，它是函数的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数
  • 但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
    tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分,tag函数的其他参数，都是模板字符串各个变量被替换后的。
    1
    2
    3
    4
    5
    let a = 5;
    let b = 10;
    tag`Hello ${ a + b } world ${ a * b }`;
    // 等同于
    tag(['Hello ', ' world ', ''], 15, 50);

热评文章