字符串的扩展 · 前端笔记

[TOC] ## Unicode表示法 JavaScript允许用\uxxx表示字符，但只限于\u0000到\uFFFF之间的字符，超出这个范围的必须用双字节的形式表示。 ES6对这一点做出了改进，只要将码点放入大括号就行。 ``` "\u{20BB7}" // "𠮷" ``` 至此，JavaScrpt一共有6种方法可以表示一个字符 ``` '\z' === 'z' '\172' === 'z' '\x7A' === 'z' '\u007A' === 'z' '\u{7A}' === 'z' ``` ## codePointAt Javascript中字符串以UTF-16的格式存储，每个字符为2个字节。对于需要4个字节存储的字符（Unicode码点大于0xFFFF）JavaScript会认为它们是2个字符。 ``` var s = '𠮷' s.length // 2 s.charAt (0) // '' s.charAt (1) // '' s.charCodeAt (1) // 55362 s.charCodeAt (1) // 57271 ``` 汉字“𠮷”的码点为0x20BB7 ，UTF-16的编码为0xD842 0xDFB7（十进制为55326 57271），需要4个字节存储。这种字符JavaScript不能正确识别。 ES6提供了codePointAt方法，返回一个字符的码点。 ``` var s = '𠮷 a' s.charPointAt (0) // 134071 s.charPointAt (1) // 57271 s.charCodeAt(2) // 97 ``` 测试一个字符是2个字节还是4个字节组成 ``` function is32Bit(c) { return c.codePointAt(0) > 0xFFFF } ``` ## String.fromCodePoint ES5提供了String.fromCodeCharCode方法，用于从码点返回对应字符串，但不能识别32位的UTF-16字符。 E66提供的String.fromCodePoint方法弥补了它的不足。 ``` String.fromCodePoint(0x20BB7) // '𠮷' ``` ## 字符串的遍历接口 ES6位字符串提供了添加了遍历器接口，使字符串可以由for ... of 循环遍历。 ``` for (let codePoint of 'foo') { console.log(codePoint) } // 'f' // 'o' // 'o' ``` 除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别。 ``` var text = String.fromCodePoint(0x2BB7) for(var i = 0; i < text.length; i++) { console.log(text[i]) } // ' ' // ' ' ``` ## at ES5对字符串提供了charAt方法，返回给定位置的字符该方法不能识别码点大于0xFFFF的字符。 ES7位字符串提供实力提供了at方法可以识别Unicode编码大于0xFFFF的字符。 ``` 'abc'.at(0) // 'a' '𠮷'.at(0) // '𠮷' ``` ## normailize 用来将字符串的不同表示方统一为同样的形式，称为Unicode正规化。 ## includes，startsWith，endsWith 以前JavaScript只有indexOf方法确定一个字符串是否包含在另一个字符串中。ES6又提供了3种方法。 includes：返回布尔值，表示是否找到参数字符串。 startsWith：返回布尔值，表示参数字符串是否在源字符串的头部。 endsWith：返回布尔值，表示参数字符串是否在源字符串的尾部。 ``` var s = 'hello world' s.startsWith('hello') // true s.endsWith('d') // true s.includes('o') // true ``` 这三个方法都支持第2个参数，表示开始搜索的位置。endsWidth的行为与其他两个方法不同，它针对前n个字符，其他两个方法针对从第n个位置知道字符串结束的字符 ## repeat repeat方法返回一个新字符串，表示将原字符串重复n次。 ``` 'x'.repeat(3) // 'xxx' ``` ## padStart，padEnd ES7推出了字符串补全长度的功能。如果某个字符串未达到指定长度，padStart会在头部补全，padEnd在尾部。它们分别接受两个参数，第一个参数指定字符串的最小长度，第二个参数是用来补全的字符串。如果省略第二个参数，会用空格补全。 ``` 'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' ``` ## 模板字符串模板字符串可以当做普通字符串、多行字符串或嵌入变量来使用，用反引号（\`）标识。如果使用模板字符串表示多行字符串，所以空格和缩进都会被保留。代码中使用了反引号需要加反斜杠转义。嵌入变量，需要将变量名放在${}中。 {}中可以放入任意JavaScript表达式，进行运算，引用对象属性和调用函数。 `In Javascript this is not legal` var x = 1, y = 2 `${x} + ${y} = ${x+y}` var obj = {x:1, y:2} $(obj.x + obj.y) ## 标签字符串模板字符串可与跟在一个函数后，这个函数将被用来处理这个模板字符串，被称为标签模板功能。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。 tag函数的第一个参数是数组，它的成员是模板字符串哪些没有变量替换的部分。其他参数是各个变量被替换的值。 var a = 5 var b = 2 function tag(s, v1, v2) { console.log(s[0]) console.log(s[1]) console.log(s[2]) console.log(v1) console.log(v2) } tag`Hello ${a + b} world ${a * b}` //Hello // world // //7 //10 ## String.raw String.raw方法往往用来充电字符串模板的处理函数，返回一个反斜杠（反斜线前再加一个反斜线）的字符串，对应于替换变量后的模板字符串。如果原字符串的反斜杠已转义，String.raw不会做处理。 String.raw`Hi\n${2+3}` // "Hi\\n5"