ES6 字符串

1. 字符串的遍历

ES6字符串增加了遍历器接口，for-of 语法，相比传统for(let i=0;.....)来循环字符串，for-of循环可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点

for (let cp of 'foo') {
  console.log(cp)
}

2. normalize()

在欧洲很多国家的字符中有语调和符号或重音符号，Unicode提供了两种方法。一种是直接提供带重音符号的字符，比如Ǒ（\u01D1）。另一种是提供合成符号（combining character），即原字符与重音符号的合成，两个字符合成一个字符，比如O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C）。 这两种语法在在视觉和语义上都等价，过去javascript不能识别这种等价。

'\u01D1'==='\u004F\u030C' //false

'\u01D1'.length // 1
'\u004F\u030C'.length // 2

ES6提供的normalize()方法，可在字符串比较之前正规化，规避这种错误。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true

3. includes()

过去判断数组或字符串中包含某一元素的时候需要用到indexOf()方法， 现在数组或字符串都能使用includes()方法来判断是否包含某一元素。

const arr = ['apple', 'banana', 'orange']
const str = 'Sometimes I walk a little faster in the school hallway just to get next to you.'
arr.includes('orange') //true
str.includes('walk') //true

4. startsWith(), endsWith()

判断字符串是否以指定子串开头/结尾

'You can say goodbye and you can say hello'.startsWith('You') 
//true
'Welcome to LA'.endsWith('LA')
//true

5. repeat()

str.repeat(n)返回一个字符串，重复str n次的结果, 如果n是小数，则会被floor取整，n如果为其他类型则会转为数字再执行，如果为Infinity或负数或NaN， 报错

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

6. padStart()，padEnd()

字符串没有达到要求的长度，可以在开始/结尾处填充到指定长度

let str = 'abc'
str.padStart(5, '>')
//>>abc

'x'.padEnd(5, 'ab') // 'xabab'

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

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果省略第二个参数，则默认补全空格

'x'.padStart(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"

7. 模版字符串

模版字符串是一种增强型的字符串，以符号``为标识，它可以当成普通的字符串使用，也可以不带\n直接写多行字符串，也可以在字符串中以${}插入变量或表达式

// 普通字符串
`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}?`

模版字符串以反引号``作为标识，如果模版字符串中出现反引号，则需要用反斜杠转义`

let greeting = `\`Yo\` Greet!`;
// `Yo` Greet!

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

// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

8. 模版编译函数

模版字符串的灵活使用，需要写编译函数来完成 下面，下面是一个通过模板字符串，生成正式模板的实例。

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

上面的代码中， 放置了一个常规模板。该模板使用<%...%>放置JavaScript代码，使用<%= ... %>输出JavaScript表达式。

将上面的内容拼装成一个模板编译函数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>

9. 标签模版

标签模版并不是模版，而是给函数传参的一种形式，标签就是指函数，模版就是指紧跟在后面的模版字符串。

let foo = 5;
let bar = 10;

tag`Hello ${ foo + bar } world ${ foo * bar }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

下面是一个应用的例子

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

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

  output += literals[index]
  return output;
}
msg //"The total is 30 (31.5 with tax)"

标签模版有一个经典的应用，过滤用户的恶意输入(XSS攻击)

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

function SaferHTML(templateData, ...values) {
  var s = '';
  for (var i = 0; i < values.length; i++) {
    var arg = String(values[i]);

    // Escape special characters in the substitution.
    s += templateData[i] + arg.replace(/&/g, "&amp;")
                                .replace(/</g, "&lt;")
                                .replace(/>/g, "&gt;");
  }
  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位访问者！

之所以叫标签模版，其实最多的使用真实是用来处理标签模版

jsx`
  <div>
    <input
      ref='input'
      onChange='${this.handleChange}'
      defaultValue='${this.state.value}' />
      ${this.state.value}
   </div>
`

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

// 下面的hashTemplate函数
// 是一个自定义的模板处理函数
// 将伪代码转换为实际结果
var libraryHtml = hashTemplate`
  <ul>
    #for book in ${myBooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
    #end
  </ul>
`;

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

java`
class HelloWorldApp {
  public static void main(String[] args) {
    System.out.println(“Hello World!”); // Display the string.
  }
}
`
HelloWorldApp.main();

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

console.log`123`
// ["123", raw: Array[1]]

上面代码中，console.log接受的参数，实际上是一个数组。该数组有一个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两个字符，而不是换行符。这是为了方便取得转义之前的原始模板而设计的。

10. String.raw()

ES6 String.raw()可以理解为功能为转义的标签模版函数，它的功能是把字符串中的\转义，结果为\ \

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

String.raw`Hi\u000A!`;
// 'Hi\\u000A!'

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

String.raw`Hi\\n`
// "Hi

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

//'test'会先转为['t', 'e', 's', 't']

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

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