ECMAScript 6（7）模板字符串

た入场券 2022-06-18 01:16 145阅读 0赞

### 模板字符串 ###

解释：

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

附一个简单的demo

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

<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. 解析变量时，变量的取值是根据该变量声明时所在作用域里而决定的。

如示例代码：

例如在以上示例中，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. 因此只要有数据、就可以用简单的几行代码，就可以展现出表格。

如示例代码：

输出结果（源代码）：

<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来获取这个数组

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

#### **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 ."