ECMAScript 6 字符串的扩展

es6加强了对unicode的支持，并且扩展了字符串对象。

字符的unicode表示法

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

"\u0061"
// "a"

但是，这种表示法只限于\u0000——\uffff之间的字符。超出这个范围的字符，必须用两个双字节的形式表达。

"\ud842\udfb7"
// "????"

"\u20bb7"
// " 7"

上面代码表示，如果直接在“\u”后面跟上超过0xffff的数值（比如\u20bb7），javascript会理解成“\u20bb+7”。由于\u20bb是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。

es6对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

"\u{20bb7}"
// "????"

"\u{41}\u{42}\u{43}"
// "abc"

let hello = 123;
hell\u{6f} // 123

'\u{1f680}' === '\ud83d\ude80'
// true

上面代码中，最后一个例子表明，大括号表示法与四字节的utf-16编码是等价的。

有了这种表示法之后，javascript共有6种方法可以表示一个字符。

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7a' === 'z' // true
'\u007a' === 'z' // true
'\u{7a}' === 'z' // true

codepointat()

javascript内部，字符以utf-16的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（unicode码点大于0xffff的字符），javascript会认为它们是两个字符。

var s = "????";

s.length // 2
s.charat(0) // ''
s.charat(1) // ''
s.charcodeat(0) // 55362
s.charcodeat(1) // 57271

上面代码中，汉字“????”的码点是0x20bb7，utf-16编码为0xd842 0xdfb7（十进制为55362 57271），需要4个字节储存。对于这种4个字节的字符，javascript不能正确处理，字符串长度会误判为2，而且charat方法无法读取整个字符，charcodeat方法只能分别返回前两个字节和后两个字节的值。

es6提供了codepointat方法，能够正确处理4个字节储存的字符，返回一个字符的码点。

var s = '????a';

s.codepointat(0) // 134071
s.codepointat(1) // 57271

s.charcodeat(2) // 97

codepointat方法的参数，是字符在字符串中的位置（从0开始）。上面代码中，javascript将“????a”视为三个字符，codepointat方法在第一个字符上，正确地识别了“????”，返回了它的十进制码点134071（即十六进制的20bb7）。在第二个字符（即“????”的后两个字节）和第三个字符“a”上，codepointat方法的结果与charcodeat方法相同。

总之，codepointat方法会正确返回32位的utf-16字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charcodeat方法相同。

codepointat方法返回的是码点的十进制值，如果想要十六进制的值，可以使用tostring方法转换一下。

var s = '????a';

s.codepointat(0).tostring(16) // "20bb7"
s.charcodeat(2).tostring(16) // "61"

你可能注意到了，codepointat方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是1，但是必须向charcodeat方法传入2。解决这个问题的一个办法是使用for...of循环，因为它会正确识别32位的utf-16字符。

var s = '????a';
for (let ch of s) {
  console.log(ch.codepointat(0).tostring(16));
}
// 20bb7
// 61

codepointat方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32bit(c) {
  return c.codepointat(0) > 0xffff;
}

is32bit("????") // true
is32bit("a") // false

string.fromcodepoint()

es5提供string.fromcharcode方法，用于从码点返回对应字符，但是这个方法不能识别32位的utf-16字符（unicode编号大于0xffff）。

string.fromcharcode(0x20bb7)
// "ஷ"

上面代码中，string.fromcharcode不能识别大于0xffff的码点，所以0x20bb7就发生了溢出，最高位2被舍弃了，最后返回码点u+0bb7对应的字符，而不是码点u+20bb7对应的字符。

es6提供了string.fromcodepoint方法，可以识别0xffff的字符，弥补了string.fromcharcode方法的不足。在作用上，正好与codepointat方法相反。

string.fromcodepoint(0x20bb7)
// "????"
string.fromcodepoint(0x78, 0x1f680, 0x79) === 'x\ud83d\ude80y'
// true

上面代码中，如果string.fromcodepoint方法有多个参数，则它们会被合并成一个字符串返回。

注意，fromcodepoint方法定义在string对象上，而codepointat方法定义在字符串的实例对象上。

字符串的遍历器接口

es6为字符串添加了遍历器接口（详见《iterator》一章），使得字符串可以被for...of循环遍历。

for (let codepoint of 'foo') {
  console.log(codepoint)
}
// "f"
// "o"
// "o"

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

var text = string.fromcodepoint(0x20bb7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "????"

上面代码中，字符串text只有一个字符，但是for循环会认为它包含两个字符（都不可打印），而for...of循环会正确识别出这一个字符。

at()

es5对字符串对象提供charat方法，返回字符串给定位置的字符。该方法不能识别码点大于0xffff的字符。

'abc'.charat(0) // "a"
'????'.charat(0) // "\ud842"

上面代码中，charat方法返回的是utf-16编码的第一个字节，实际上是无法显示的。

目前，有一个提案，提出字符串实例的at方法，可以识别unicode编号大于0xffff的字符，返回正确的字符。

'abc'.at(0) // "a"
'????'.at(0) // "????"

这个方法可以通过垫片库实现。

normalize()

许多欧洲语言有语调符号和重音符号。为了表示它们，unicode提供了两种方法。一种是直接提供带重音符号的字符，比如Ǒ（\u01d1）。另一种是提供合成符号（combining character），即原字符与重音符号的合成，两个字符合成一个字符，比如o（\u004f）和ˇ（\u030c）合成Ǒ（\u004f\u030c）。

这两种表示方法，在视觉和语义上都等价，但是javascript不能识别。

'\u01d1'==='\u004f\u030c' //false

'\u01d1'.length // 1
'\u004f\u030c'.length // 2

上面代码表示，javascript将合成字符视为两个字符，导致两种表示方法不相等。

es6提供字符串实例的normalize()方法，用来将字符的不同表示方法统一为同样的形式，这称为unicode正规化。

'\u01d1'.normalize() === '\u004f\u030c'.normalize()
// true

normalize方法可以接受一个参数来指定normalize的方式，参数的四个可选值如下。

nfc，默认参数，表示“标准等价合成”（normalization form canonical composition），返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。
nfd，表示“标准等价分解”（normalization form canonical decomposition），即在标准等价的前提下，返回合成字符分解的多个简单字符。
nfkc，表示“兼容等价合成”（normalization form compatibility composition），返回合成字符。所谓“兼容等价”指的是语义上存在等价，但视觉上不等价，比如“囍”和“喜喜”。（这只是用来举例，normalize方法不能识别中文。）
nfkd，表示“兼容等价分解”（normalization form compatibility decomposition），即在兼容等价的前提下，返回合成字符分解的多个简单字符。

'\u004f\u030c'.normalize('nfc').length // 1
'\u004f\u030c'.normalize('nfd').length // 2

上面代码表示，nfc参数返回字符的合成形式，nfd参数返回字符的分解形式。

不过，normalize方法目前不能识别三个或三个以上字符的合成。这种情况下，还是只能使用正则表达式，通过unicode编号区间判断。

includes(), startswith(), endswith()

传统上，javascript只有indexof方法，可以用来确定一个字符串是否包含在另一个字符串中。es6又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startswith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endswith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = 'hello world!';

s.startswith('hello') // true
s.endswith('!') // true
s.includes('o') // true

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

var s = 'hello world!';

s.startswith('world', 6) // true
s.endswith('hello', 5) // true
s.includes('hello', 6) // false

上面代码表示，使用第二个参数n时，endswith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

repeat()

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

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数，会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者infinity，会报错。

'na'.repeat(infinity)
// rangeerror
'na'.repeat(-1)
// rangeerror

但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0。

'na'.repeat(-0.9) // ""

参数nan等同于0。

'na'.repeat(nan) // ""

如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

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'

上面代码中，padstart和padend一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

'xxx'.padstart(2, 'ab') // 'xxx'
'xxx'.padend(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'abc'.padstart(10, '0123456789')
// '0123456abc'

如果省略第二个参数，则会用空格补全长度。

'x'.padstart(4) // '   x'
'x'.padend(4) // 'x   '

padstart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padstart(10, '0') // "0000000001"
'12'.padstart(10, '0') // "0000000012"
'123456'.padstart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padstart(10, 'yyyy-mm-dd') // "yyyy-mm-12"
'09-12'.padstart(10, 'yyyy-mm-dd') // "yyyy-09-12"

模板字符串

传统的javascript语言，输出模板通常是这样写的。

$('#result').append(
  'there are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onsale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，es6引入了模板字符串解决这个问题。

$('#result').append(`
  there are <b>${basket.count}</b> items
   in your basket, <em>${basket.onsale}</em>
  are on sale!
`);

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

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

// 多行字符串
`in javascript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

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

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`yo\` world!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {
  if (!user.hasprivilege(action)) {
    throw new error(
      // 传统写法为
      // 'user '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `user ${user.name} is not authorized to do ${action}.`);
  }
}

大括号内部可以放入任意的javascript表达式，可以进行运算，以及引用对象属性。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

模板字符串之中还能调用函数。

function fn() {
  return "hello world";
}

`foo ${fn()} bar`
// foo hello world bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的tostring方法。

如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
var msg = `hello, ${place}`;
// 报错

由于模板字符串的大括号内部，就是执行javascript代码，因此如果大括号内部是一个字符串，将会原样输出。

`hello ${'world'}`
// "hello world"

模板字符串甚至还能嵌套。

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。

const data = [
    { first: '<jane>', last: 'bond' },
    { first: 'lars', last: '<croft>' },
];

console.log(tmpl(data));
// <table>
//
//   <tr><td><jane></td></tr>
//   <tr><td>bond</td></tr>
//
//   <tr><td>lars</td></tr>
//   <tr><td><croft></td></tr>
//
// </table>

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一
let str = 'return ' + '`hello ${name}!`';
let func = new function('name', str);
func('jack') // "hello jack!"

// 写法二
let str = '(name) => `hello ${name}!`';
let func = eval.call(null, str);
func('jack') // "hello jack!"

实例：模板编译

下面，我们来看一个通过模板字符串，生成正式模板的实例。

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

上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置javascript代码，使用<%= ... %>输出javascript表达式。

怎么编译这个模板字符串呢？

一种思路是将其转换为javascript表达式字符串。

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

这个转换使用正则表达式就行了。

var evalexpr = /<%=(.+?)%>/g;
var expr = /<%([\s\s]+?)%>/g;

template = template
  .replace(evalexpr, '`); \n  echo( $1 ); \n  echo(`')
  .replace(expr, '`); \n $1 \n  echo(`');

template = 'echo(`' + template + '`);';

然后，将template封装在一个函数里面返回，就可以了。

var script =
`(function parse(data){
  var output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

将上面的内容拼装成一个模板编译函数compile。

function compile(template){
  var evalexpr = /<%=(.+?)%>/g;
  var expr = /<%([\s\s]+?)%>/g;

  template = template
    .replace(evalexpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  var script =
  `(function parse(data){
    var output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}

compile函数的用法如下。

var parse = eval(compile(template));
div.innerhtml = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

标签模板

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

alert`123`
// 等同于
alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

var a = 5;
var b = 10;

tag`hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['hello ', ' world ', ''], 15, 50);

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。

函数tag依次会接收到多个参数。

function tag(stringarr, value1, value2){
  // ...
}

// 等同于

function tag(stringarr, ...values){
  // ...
}

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

tag函数所有参数的实际值如下。

第一个参数：['hello ', ' world ', '']
第二个参数: 15
第三个参数：50

也就是说，tag函数实际上以下面的形式调用。

tag(['hello ', ' world ', ''], 15, 50)

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。

var a = 5;
var b = 10;

function tag(s, v1, v2) {
  console.log(s[0]);
  console.log(s[1]);
  console.log(s[2]);
  console.log(v1);
  console.log(v2);

  return "ok";
}

tag`hello ${ a + b } world ${ a * b}`;
// "hello "
// " world "
// ""
// 15
// 50
// "ok"

下面是一个更复杂的例子。

var total = 30;
var msg = passthru`the total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {
  var result = '';
  var i = 0;

  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }

  return result;
}

msg // "the total is 30 (31.5 with tax)"

上面这个例子展示了，如何将各个参数按照原来的位置拼合回去。

passthru函数采用rest参数的写法如下。

function passthru(literals, ...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }

  output += literals[index]
  return output;
}

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

var message =
  saferhtml`<p>${sender} has sent you a message.</p>`;

function saferhtml(templatedata) {
  var s = templatedata[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = string(arguments[i]);

    // escape special characters in the substitution.
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // don't escape special characters in the template.
    s += templatedata[i];
  }
  return s;
}

上面代码中，sender变量往往是用户提供的，经过saferhtml函数处理，里面的特殊字符都会被转义。

var sender = '<script>alert("abc")</script>'; // 恶意代码
var message = saferhtml`<p>${sender} has sent you a message.</p>`;

message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

标签模板的另一个应用，就是多语言转换（国际化处理）。

i18n`welcome to ${sitename}, you are visitor number ${visitornumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"

模板字符串本身并不能取代mustache之类的模板库，因为没有条件判断和循环处理功能，但是通过标签函数，你可以自己添加这些功能。

// 下面的hashtemplate函数
// 是一个自定义的模板处理函数
var libraryhtml = hashtemplate`
  <ul>
    #for book in ${mybooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
    #end
  </ul>
`;

除此之外，你甚至可以使用标签模板，在javascript语言之中嵌入其他语言。

jsx`
  <div>
    <input
      ref='input'
      onchange='${this.handlechange}'
      defaultvalue='${this.state.value}' />
      ${this.state.value}
   </div>
`

上面的代码通过jsx函数，将一个dom字符串转为react对象。你可以在github找到jsx函数的具体实现。

下面则是一个假想的例子，通过java函数，在javascript代码之中运行java代码。

java`
class helloworldapp {
  public static void main(string[] args) {
    system.out.println(“hello world!”); // display the string.
  }
}
`
helloworldapp.main();

模板处理函数的第一个参数（模板字符串数组），还有一个raw属性。

tag`first line\nsecond line`

function tag(strings) {
  console.log(strings.raw[0]);
  // "first line\\nsecond line"
}

上面代码中，tag函数的第一个参数strings，有一个raw属性，也指向一个数组。该数组的成员与strings数组完全一致。比如，strings数组是["first line\nsecond line"]，那么strings.raw数组就是["first line\\nsecond line"]。两者唯一的区别，就是字符串里面的斜杠都被转义了。比如，strings.raw数组会将\n视为\和n两个字符，而不是换行符。这是为了方便取得转义之前的原始模板而设计的。

string.raw()

es6还为原生的string对象，提供了一个raw方法。

string.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

string.raw`hi\n${2+3}!`;
// "hi\\n5!"

string.raw`hi\u000a!`;
// 'hi\\u000a!'

如果原字符串的斜杠已经转义，那么string.raw不会做任何处理。

string.raw`hi\\n`
// "hi\\n"

string.raw的代码基本如下。

string.raw = function (strings, ...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

string.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

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

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

// 等同于
string.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);