ES6:字符串的扩展

A.模版字符串

模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。

优点

允许嵌入表达式的字符串字面量，可以使用多行字符串和字符串插值功能。

var str = 'keep hungry';//普通字符串
var newStr =`keep foolish`;//模版字符串
console.log(str, newStr)
//keep hungry keep foolish

1.支持折行

var str = `life
is
myself`
console.log(str);
//life
//is
//myself

对比

var str = 'life\
is\
myself'
console.log(str);//life    is     myself

2.插入变量,用${}代替繁琐的变量引用

 var kiwi = {
     age : 27,
     height : 172,
     name : 'kiwi'
 }
var {age, height, name} = kiwi
var str = 'name: ' + name + 'age: ' + age + 'height: ' + height;
console.log(str);
//name: kiwiage: 27height: 172
var newStr = `name: ${name} age: ${age} height: ${height}`;
console.log(newStr);
//name: kiwi age: 27 height: 172

3.插入表达式

var a = 5;
var b = 10;
console.log(`A is ${a + b} and B is ${2 * a + b}`);
//apples 15 and oranges 20

4.嵌套模版

var arr = [a, b, c, d]
var resStr = `${arr.map(function(item, index){
    return `${item}: ${index}`
})}`
console.log(resStr)
//a: 0,b: 1,c: 2,d: 3

B.带标签的模板字符串

可以用函数解析模板字符串,标签函数的第一个参数包含一个字符串值的数组,其余的参数与表达式相关。

1.实质:函数调用的特殊形式

var name = 'kiwi';
var where = 'SH';
function show(){
    console.log(arguments)
}
show`hello ${name} ,welcome to ${where}`;
//等同于下面
show(['hello ', ',welcome to ', ''], name, where);

以上show()第一个参数['hello ', ',welcome to ', '']是一个字符串值的数组,其余的name, where是为与表达式相关的参数

2.原始字符串-特别属性 raw

在标签函数的第一个参数中，存在一个特殊的属性raw，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

function tag(strings) {
  console.log(strings.raw[0]);
}
tag`kiwi is a dog \n coco is a cup of tea`;
//kiwi is a dog \n coco is a cup of tea

3.带标签的模版字面量遵守以下转义序列的规则

Unicode字符以"\u"开头，例如\u00A9

Unicode码位用"\u{}"表示，例如\u{2F804}

十六进制以"\x"开头，例如\xA9

八进制以""和数字开头，例如\251

4.应用：过滤 HTML

防止name = <script> 恶意攻击的内容 </script>

var name = '<script>alter("aaa") <\/script>';
safeHTML`<p> ${name}welcome to shanghai </P>`;
//(['<p> ', 'welcome to shanghai </p>'],name)
function safeHTML(date){
    var str = date[0];
    for(let i = 1; i < arguments.length; i ++){
        var arg = String(arguments[i])
        str += arg.replace(/&/g, '&amp')
                   .replace(/</g, '&lt:')
                   .replace(/>/g, 'g&t;');
        str += date[i];
    }
    console.log(str);
}
//<p> &lt:scriptg&t;alter("aaa") &lt:/scriptg&t;welcome to shanghai </P>

上面函数中 arguments 是实参列表，date是形参.