js es6 模板字符串和使用

Bertha 。 2023-02-24 12:28 10阅读 0赞

**模板字符串描述：**  
模板字符串使用反引号 (\`\`) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（$\{expression\}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（\`）时，需要在它前面加转义符（\\）。

//以前的字符串写法
    var name='大毛',color='黄色';
    var str=name+'是一只'+color+'的猫';
    console.log(str)  //大毛是一只黄色的猫
    
    //模板字符串的写法
    var template=`${ name}是一只${ color}的猫`;
    console.log(template);//大毛是一只黄色的猫
    //页面输出的时候
    var templateStr=`<div> <p>${ name}是一只${ color}的猫</p> </div>`;
    console.log(templateStr);    
    // <div>
    // <p>大毛是一只黄色的猫</p>
    // </div>
    //使得代码的结构可读性更强

**插入表达式和嵌套模板**

**标签的模板字符串**

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后，你的函数可以返回处理好的的字符串（或者它可以返回完全不同的东西 , 如下个例子所述）。用于该标签的函数的名称可以被命名为任何名字。