ES6语法——字符串扩展

一、ES6 加强了对 Unicode 的支持,正确识别两个字节组成的字符

  在ES5中我们知道JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示,但是ES5却无法正确的识别这个有两个字节组成的字符。ES6中,JavaScript增加了对超出\u0000~\uFFFFUnicode范围的字符支持。
  ES6的解决方法:将这种超过两个字节的组成的单个字符的码点放在一对花括号里面就可以正确的识别

二、codePointAt(index)方法

  JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为2个字节。对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符), JavaScript 会认为它们是两个字符。**这里解释了为什么”𠮷”这个字符调用length属性的时候,返回的长度是2了。
  在ES5为我们提供的charCodeAt(index)方法只能分别返回”𠮷”前两个字节和后两个字节的值,而charAt(index)方法无法正常读取这个字符(出现了乱码)。ES6 提供了codePointAt(index)方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。

  值得注意的是:
  (1)codePointAt(index)方法识别大于两个Unicode节点编码的字符的时候,识别前两个字节的时候会直接将这个四个字节的字符的码值返回,识别后面的字节的码值和charCodeAt(index)返回的结果一致
  (2)codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符,它的返回结果与charCodeAt方法相同(这就导致了下面所说的那种情况)。
  (3)通过for……of 循环解决codePointAt(index)在传入正确的位置索引的时候,返回的结果有偏差的问题—–原理就是for …….of 循环可以正确的识别 32 位的 UTF-16 字符

三、String.fromCodePoint(numX,numX,…,numX)方法(numX为Unicode值)

  ES5 提供String.fromCharCode(numX,numX,…,numX)方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF)
  ES6 提供了String.fromCodePoint(numX,numX,…,numX)方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
值得注意的是:
  (1)String.fromCodePoint(numX,numX,…,numX),当传入多个Unicode值的时候,将会把结果合并成一个字符串返回
  (2)String.fromCodePoint(numX,numX,…,numX)是定义在String对象上的方法。而codePointAt(index)是定义在字符串实例上的方法,这一点要去区分

四、字符串的遍历器接口

  ES6 为字符串添加了遍历器接口,使得字符串可以被for…of循环遍历。

  除了遍历字符串,这个遍历器大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

五、at(index)

  ES5 对字符串对象提供charAt方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
  目前JavaScript有一个提案,提出字符串实例的at()方法,可以识别 Unicode 编号大于0xFFFF的字符,返回正确的字符。(at()方法可以通过babel-polyfill垫片库实现)

六、includes( string), startsWith(string ),endsWith(string )

  传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中(如果存在就返回这个字符串的位置,不存在的时候返回 -1 )。
  6.1.ES6 又提供了三种新方法:
  (一)includes(string):返回布尔值,表示是否找到了参数字符串。
  (二)startsWith(string):返回布尔值,表示参数字符串是否在原字符串的头部。
  (三)endsWith(string):返回布尔值,表示参数字符串是否在原字符串的尾部
  
6.2 关于第二个参数
  (1)
这三个方法都支持第二个参数,表示开始搜索的位置。
  (2)
endsWith的行为与其他两个方法includes() startsWith()有所不同。它针对前n个字符(开区间,不包括边界值),而其他两个方法针对从第n个(闭区间,包括边界值)位置直到字符串结束。**
  (3)注意这三个方法都是s结尾

七、repeat(number)

  repeat方法返回一个新字符串,表示将原字符串重复n次。
  repeat方法参数可能有下列情况:
  (一)参数为1,就是返回的新字符串的内容就只是重复源字符串1次
  (二)参数如果是小数,会被取整数部分。
  (三)参数如果是小于或等于-1的负数或者无穷大Infinity的数时,会报错
  (四)参数是(-1-0)区间的小数,repeat()方法会自动转换成-0 等同于repeat(0)
  (五)参数是数字型字符串的话,repeat方法会自动进行隐式转换成数字的
  (六)参数是NaN的话,等同于repeat(0)

###八、padStart(minNumber,string),padEnd(minNumber,string) ###
  这两个API具有字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart( )用于头部补全,padEnd( )用于尾部补全。
  
padStart(minNumber,string)方法和padEnd(minNumber,string)方法一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。可能出现以下情况:
  (1)如果原字符串的长度,等于或大于指定的最小长度minNumber,则这两个方法都返回原字符串。
  (2)如果用来补全的字符串与原字符串,两者的长度之和超过了指定的小长度(minNumber),则会截去超出位数的补全字符串。
  (3)如果省略第二个参数,默认使用空格补全长度。

   padStart(**minNumber,string),padEnd(**minNumber,string)的主要用途之一就是为数值补全指定位数,一般像将月份的补全为03月这样子

九、模板字符串

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

  我们在使用模板字符串的过程中需要注意以下方面:
  (一)如果在模板字符串中需要使用反引号,则前面要用反斜杠转义
  (二)如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中
  (三)模板字符串中如果要引入变量的话,要用 ${变量名} 这样的形式引入才可以
  (四)大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性
  (五)如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
  (六)模板字符串中的${…….} 大括号内部可以放入任意的 JavaScript 表达式,可以进行运算、可以引用对象属性、可以调用函数、可以甚至还能嵌套,甚至还能调用自己本身。

十、标签模板

  (一) 模板字符串可以紧跟在一个函数名后面(只能跟在后面),该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
  (二)
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
  (三)如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。下面的tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分。tag函数的其他参数,都是模板字符串各个变量被替换后的值。

   “标签模板”的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。以及切换多种语言

十一、String.raw()方法

   ES6为原生String对象新增raw()属性。String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。