ES6-字符串的扩展

2016-09-30

1.字符的Unicode表示法

JavaScript允许采用\uxxxx形式表示一个字符，其中’xxxx’表示字符的码点。

1	'\uD842\uDFB7' // 𠮷

ES6中，只要将码点放入大括号，就能正确解读该字符。

'\z' === 'z';
'\172' === 'z';
'\x7A' === 'z';
'\u007A' === 'z';
'\u{7A}' === 'z';

2.codePointAt()

JavaScript内部，字符以UTF-16的格式存储，每个字符固定为2个字节。对于那些需要4个字节的字符，JavaScript会认为他们是两个字符。
对于这种4个字节的字符，JavaScript不能正确处理，字符串长度会误判为2，而且charAt方法无法读取整个字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值。
ES6提供了codePointAt方法，能够正确处理4个字符储存的字符，返回一个字符的码点。
codePointAt()方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
    return c.codePointAt(0) > 0xFFFF;
}
is32Bit('𠮷');  // true
is32Bit('a');   // false

3.String.formCodePoint()

ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符；而ES6提供了String.fromCodePoint方法，可以识别。

1	String.formCodePoint(0x20BB7); // "𠮷"

注：fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。

4.字符串的遍历器接口

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

for(let codePoint of 'foo') {
    console.log(codePoint);
}
// 'f', 'o', 'o'

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

5.at()

ES5对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。ES6提出了at()方法，可以识别。

1	'𠮷'.charAt(0) // "\uD842" '𠮷'.at(0) // "𠮷"

6.normalize()

详情

7.includes()/startsWith()/endsWith()

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

includes()：返回布尔值，表示是否找到了参数字符串
startsWith()：返回布尔值，表示参数字符串是否在源字符串头部；
endsWith()：返回布尔值，表示参数字符串是否在源字符串尾部；

var s = 'hello world!';
s.startsWith('hello');  // true
s.endsWith('!');        // true
s.include('o');         // true

三个方法都支持第二个参数，表示开始搜索的位置。

8.repeat()

repeat方法返回一个新字符串，表示将原字符串重复n次

1	'x'.repeat(3); // 'xxx'

9.padStart()/padEnd()

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

1 2	'x'.padStart(5, 'ab'); // 'ababx' 'x'.padEdn(5, 'ab'); // 'xabab'

padStart常见的用途为数值补全指定位数和提示字符串格式

// 数值补全
'1'.padStart(5, '0');  // 00001
'12'.padStart(5, '0');  // 00012
// 字符串格式
'12'.padStart(10, 'YYYY-MM-DD');    // 'YYYY-MM-12'
'09-12'.padStart(10, 'YYYY-MM-DD' );// 'YYYY-09-12'

10.模板字符串

ES6引入了模版字符串，用反引号(`)标识。它当中可以单做普通字符串使用，也可以用来定义多行字符串，或者字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

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

模板字符串中嵌套变量，需要将变量名写在${}之中。
大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性，还能调用函数。
如果大括号中的值不是字符串，将按照一般的规则toString转为字符串。
如果模板字符串中的变量没有声明，将报错。

11.实例：模板编译

模板使用<%..%>放置JavaScript代码，使用<%=..%>输出JavaScript表达式。

var template = `
<ul>
    <% for(var i=0; i<data.supplies.length; i++) { %>
        <li><%= data.supplies[i] %></li>
    <% } %>
</ul>
`;
// 等同于
echo('<ul>');
for(var i=0; i<data.supplies.length; i++) {
    echo('<li>');
    echo(data.supplies[i]);
    echo('</li'>);
}
echo('</ul>');

12.标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这个被称为“标签模板”功能。
标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”值的就是函数，紧跟在后面的模板字符串就是它的参数。

1
2
3

alert`123`
// ===
alert(123);

“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容

var message = SafterHTML`<p>${sender} has sent you a message.</p>`;
function SafterHTML(templateData) {
    var s = templateData[0];
    for(var i=1; i<arguments.length; i++){
        var arg = String(arguments[i]);
        s += arg.replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        s += templateData[i];
    }
    return s;
}

上述代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。
标签模板的另一个应用，多语言转换（国际化处理）

1 2	i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!` // '欢迎访问xxx，您是第xxx位访问者！'

13.String.raw()

String.raw()方法，往往用来充当模版字符串的处理函数，返回一个斜杠都被转义的字符串，对应于替换变量后的模版字符串。
String.raw()方法可以作为处理模版字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

1 2	String.raw`Hi\n${2+3}!`; // 'Hi\\n5!'

String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

1 2	String.raw({raw: 'test'}, 0, 1, 2); // 't0e1s2t'

技术笔记