ECMAScript 6（7）模板字符串

模板字符串

解释：

1. 简单来说，就是一个字符串，但是这个字符串里，可以省略掉拼接字符串的“+"符号，还会保留换行符、空白符等；
2. 变量的嵌入靠  ${变量}  ，括号是花括号，花括号里可以是变量，也可以是函数（函数的话会计算出返回值后再插入）；
3. 用反引号将字符串括起来（而不是单引号或者双引号），反引号是大键盘数字1键左边，tab键上面，和波浪线~同一个键位的符号；
4. 如果用过例如Vue.js或者React之类，会发现写法有些相似。
5. vue、react等比这个强大多了=.=

附一个简单的demo

var dom = $("#test");

//可以字符串       
var userName = "李雷";

//也可以是数字 
var userAge = 20;   

//可以是对象的一个属性 
//也可以是函数
var user = {
    description: "他很高",     
    friends: ["韩梅梅", "Lily", "Lucy"]    
};

//用反引号包裹字符串
var str = `有一个人叫${userName}，他今年${userAge}岁，${user.description}，有几个朋友，分别叫${user.friends.join("，")}`;

//可以直接添加html换行符，不涉及变量的话不需要用反引号              
str += "</br>";   

//也可以直接添加数组作为变量，元素之间会用英文逗号作为连接符。使用变量时必须用反引号
str += `${user.friends}`;   

//string，虽然用反引号，但类型依然是字符串                    
console.log(typeof str);   

dom.append(str);

显示结果是：（注，这里是源代码）

<div id="test">有一个人叫李雷，他今年20岁，他很高，有几个朋友，分别叫韩梅梅，Lily，Lucy<br>韩梅梅,Lily,Lucy</div>

换行

1. 反引号内的换行情况，会被完全应用到html里面。
2. 但我们有时候会发现，我明明在反引号里面分段写的，实际体现效果却不是分段，而是空白符（表现像是一个空格符）。原因是css属性white-space的原因。浏览器使用默认值时，通常换行、tab、空格会被合并为一个空格。
3. 解决办法是可以将其css属性值设置为pre；

示例代码：

    var dom = $("#test");
    dom.css("white-space", "pre");
    var str = `第一行
第二行`;
    dom.html(str);

this

1. 变量的嵌入可以使用this，this的指向的对象和通常情况下是相同的，即该this所在作用域；
2. 更本质的来说，是作用域的问题；
3. 解析变量时，变量的取值是根据该变量声明时所在作用域里而决定的。

如示例代码：

var dom = $("#test");
var name = "外层作用域";
function test() {
    var name = "test函数";
    var str = `${name}`;
    return str;
}
dom.html(test() + `</br>${name}`);

例如在以上示例中，test函数返回的是字符串 ${name}，而在之后，又拼接了一个 ${name}

第一个的取值和第二个的取值是不同的，原因就在于作用域。前者的作用域在test函数之内，而后者的作用域是更外层的作用域。

trim方法

1. 这个方法是字符串的方法，效果是去除字符串开头和结尾的所有空白符（包括开头和结尾，包括空格、tab、换行符等）；
2. 对源字符串无影响，是返回一个新的字符串；
3. 主要作用是格式直观，方便写模板。

示例（若不加trim方法）：

    var dom = $("#test");
    dom.css("white-space", "pre");
    var str = `今天
    明天
后天`;
    dom.html(str);

示例（添加trim方法）：

    var dom = $("#test");
    dom.css("white-space", "pre");
    var str = `
今天
    明天
后天`;
    dom.html(str.trim());

模板的嵌套

1. 模板的本质是字符串，字符串是可以互相拼接的，因此模板显然也是可以拼接的。
2. 模板拼接后显然还是字符串，而字符串是可以作为变量的值，作为值后可以嵌套到模板里，因此模板可以被嵌套到模板里。
3. 比较典型的嵌套示例是表格。表格的<table>标签作为根模板，每一行是一个子模板，每个子模板内嵌变量，拼接后就是一个表格。
4. 因此只要有数据、就可以用简单的几行代码，就可以展现出表格。

如示例代码：

    var dom = $("#test");
    dom.css("white-space", "pre");
    var arr = [1, 2, 3, 4, 5];
    var fun = function (num) {
        return `<tr><td>当前数字是${num}</td></tr>`;
    }
    var str = `
这是模板套模板：
<table>
${arr.map(function (item) {
        return fun(item)
    }).join("")}
</table>`;
    dom.html(str.trim());

输出结果（源代码）：

<div id="test" style="white-space: pre;">这是模板套模板：
<table>
<tbody><tr><td>当前数字是1</td></tr><tr><td>当前数字是2</td></tr><tr><td>当前数字是3</td></tr><tr><td>当前数字是4</td></tr><tr><td>当前数字是5</td></tr>
</tbody></table></div>

模板的简单应用

1. 我们使用模板的目的，就是为了生成一个符合我们要求的字符串，然后将这个字符串内嵌到页面中；
2. 模板内的变量的值，取决于作用域里对应的变量；
3. 因此，我们可以通过生成一个函数作用域，然后将模板内需要的值，作为参数传递给函数内，然后生成的模板字符串作为结果返回，这样就可以获得一个符合我们期望的模板了；
4. 我们甚至可以通过判断是否传参，然后决定模板里的某段内容是否显示，这样生成的模板会更加符合要求；

如代码：

<div id="test"></div>
<script>
    var dom = $("#test");
    dom.css("white-space", "pre");
    var fun = function (obj) {
        var template = `<table>`;
        if (typeof obj.name !== "undefined") {
            template += `<tr><td>名字</td><td>${obj.name}</td></tr>`;
        }
        if (typeof obj.age !== "undefined") {
            template += `<tr><td>年龄</td><td>${obj.age}</td></tr>`;
        }
        if (typeof obj.sex !== "undefined") {
            template += `<tr><td>性别</td><td>${obj.sex}</td></tr>`;
        }
        if (typeof obj.isSingle !== "undefined") {
            if (obj.isSingle) {
                template += `<tr><td>单身</td><td>是</td></tr>`;
            } else {
                template += `<tr><td>单身</td><td>否</td></tr>`;
            }
        }
        return template;
    }
    var msg = fun({
        name: "张三",
        sex: "男",
        isSingle: true
    })
    dom.append(msg);
</script>

显示结果是：（其中因为没有age属性，所以年龄那一行没有出现）

名字  张三
性别  男
单身  是

标签模板

作用：

1. 过滤HTML字符串，防止用户输入恶意内容。
2. JSX语法

生效方式：

1. 具体来说：
    有模板（注意该模板不能被赋值为变量后使用）：
    `<p>变量1${a}，变量2${b}</p>`


    有函数:
    var fun = function (arr, arg1, arg2) {
        console.log(arr);
        console.log(arg1);
        console.log(arg2);
    }

2. 当调用函数fun处理模板时，根据使用方式不同，结果可能不同，具体而言：
    ——————————————————————————————————————————————————
    //情况1：（注意，模板没有被括号包含起来）
    var a = 10;
    var b = "b";
    fun`<p>变量1${a}，变量2${b}</p>`

    输出结果是：
    ["<p>变量1", "，变量2", "</p>", raw: Array[3]]
    10
    b
    ——————————————————————————————————————————————————
    //情况2：（模板被括号包含起来）
    var a = 10;
    var b = "b";
    fun(`<p>变量1${a}，变量2${b}</p>`)

    输出结果是：
    <p>变量110，变量2b</p>
    undefined
    undefined
    ——————————————————————————————————————————————————

3. 解释：
    情况二是常规情况，就不解释了。
    情况一中，当模板直接跟在函数名之后，被调用处理时，其并非是直接把模板解释为字符串后再被函数处理，而是将模板分拆成几部分
    具体来说：
    fun`<p>变量1${a}，变量2${b}</p>`
    相当于
    fun(["<p>变量1", "，变量2", "</p>"], 10, "b");

    也就是说，
    ①将模板里内嵌的变量从模板中依次提取出来，作为函数的第2、3、4……个参数；
    ②而模板本身被内嵌的变量分拆为（变量数 + 1）个部分，这些部分被依次放到一个数组中，并且将这个数组作为函数的第一个参数；

4. 通俗的总结：
    当模板直接跟在函数名后，模板被拆分为（变量数*2+1）个部分，其中非变量部分被放置在数组中，作为函数的第一个参数来处理，变量部分被依次放在函数的第2、3、4……个参数的位置。

5. 这种函数的处理方式被称为【标签模板】

如何使用标签模板：

1. 由于标签模板的特性，因此我们不能将标签模板以模板字符串的方式使用；
2. 然而又因为模板的特性，我们需要的只是变量值，标签可以预先写好；
3. 因此在使用标签模板时，我们需要提前在js代码里写好模板，然后将用户输入的变量作为标签模板的变量传入，然后进行处理；

关于JSX语法：

1. 由于标签模板的特性，因此我们可以分为几部分：模板字符串（无变量部分），以及变量；
2. 而在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析；
3. 因此，可以利用标签模板的特性，实现JSX语法的功能（因为自动拆分为了变量和html标签）；
4. 更多关于JSX语法的知识，建议自行谷歌或者百度；

应用场景：

1、显示内容的值是可变的（比如input输入框->html标签）；
2、国际化（同一个变量在不同语言下是不同值）；

模板的raw属性

1、简单来说，就是返回转义前的内容；

比如说，模板是\n的，放在html是换行符，但是raw返回的就是字符串”\n”

换行符是转义后的内容，而\n就是一个字符串而已

2、必须要求是通过标签模板来处理（即类似fun模板字符串）这样的方式，然后在函数内才能通过参数.raw来获取这个数组

可以参照以下代码查看效果：

var string = "abc";
var number = 123;
tag`First line\n another：string-> ${string} number-> ${number} .`

function tag(strings) {
    console.log(strings);
    console.log(strings.raw);
}

String.raw()

1、返回一个字符串，这个字符串里面的模板变量已经被替代，但其他内容是转义前的内容；

如示例：

//模板
var string = "abc";
var number = 123;
var template = String.raw`First line\n \ another：string-> ${string} number-> ${number} .`
console.log(template);

//输出结果（记住，这是一个字符串，即\n放在html里不是换行符）
//可以通过将以下字符串内嵌到dom里确认
"First line\n \ another：string-> abc number-> 123 ."