模板字面量

2. 模板字面量

1. es6之前.想实现多行字符串,要么使用一个原来js,语言级bug来实现一个多行.
2. 把字符串替换已存在的变量值的能力
3. HMTL转义

2.1 基本语法

使用一个反引号 “ 用来包含普通字符串,而不是之前的双引号或单号

let msg = `hello ES6`;
console.log(msg)

在以上这 个案例中,并没有感受到和之前有什么不一样.

如果想要输出反引号 “ 可以使用 转义符 \

let msg = `\`hello ES6\``;
console.log(msg)

在模板字符串里面.如果想要输出单引号或双引号.就不需要转义符 \

let msg = `"hello"'ES6'`;
console.log(msg)

2.1 多行字符串

在ES6之前想要实现多行字符串.可以使用一个语法BUG,在换行之前使反斜线 ( \ ),可以用于创建多行字符串.为什么不用.因为是一个语言级的BUG.你不知道什么时候他被修复了.

var msg = "hello \
ES6";
console.log(msg)

这里确实换行了.并且可以被输出.但是打印的时候并不会真正的换行.因为反斜线 ( \ )是延续符号,而不是新行的符号.如果你想要在输出中换行.可以这样写

var msg = "hello \n\
ES6";
console.log(msg)

ES6中推出的多行字符串就不需要使用这种BUG了只需要在你需要的地方包含换行就可以了

let msg = `hello 
es6;
`
console.log(msg)

需要注意提所有的空格都会被认为是内容的一部分,所以需要注意空格的问题.保持合理的缩进

let ouput = `

<h1>
    <div>hello</div>
</h1>

`.trim();
console.log(ouput)

trim()可以清空字符串左右两边的空格.

如果只是单纯想要实现输出结果的换行可以使 \n ;

以上只是可以实现换行…但是真正的意见在于允许你使用js表达式嵌入到模板字面量当中.

比如:

let msg = 'hello';
let res = `${msg},world`;

console.log(res)

替换位 \${msg} 替换位是\$开始,与结束{}来界定.之间可以放入任意的JS表达式.以上是最简单的示例

既然替换位是表达式.哪么可替换的就不可能只是变量.还可以放计算,函数调用.

let n = 5,
    m = 20.452342,
    msg = `${n+m}`;

    msg = `$${(n * m).toFixed(2)}`
console.log(msg)

在上面这个案例中.我可使用了计算.并且调用方法.在替换位之前的美元符号可以被正常输出.因为没{}跟随其后.

另外模板字面量本身也是JS表达式,这也就是可以把模板字面量嵌入到另一个模板字面量的内部

比如:

let msg = "张三",
    res = `hello ${
        `他叫${msg}`
    }`;
    console.log(res)

现在我们都已经理解 了字面量不用做任何的连接…就可以直接使用多行字符串以膝上计算机插值功能.不过这个还不是真正牛逼的地方..真正厉害的是模板标签(template tag),能对模板字面量进行转换并返回最终的字符串值.标签在模板起始处被指定. 也就是在第一个` 之前

比如

let msg = tag`hello 张三`;

在上面这个例子,tag就是会被应用到hello 张三,

一个标签tag仅仅只是一个函数,在被调用 时接收需要处理的模板字面量的数据.标签所接收的数据被划分为独立的片段,并且必须组合来创建结果.第一个参 数是一个数组,包含被js解释过的字面量字符串.随后的参数是每个替换位的解释值

function tag(val,...args){
// 返回一个字符串
}

用一个列子来解释一下传递给标签的是什么参数.

比如:

let conut = 10;
let price = 0.25;
let msg = tag`${conut} items cost $${(conut * price).toFixed}.`;

如果我有一个tag()的函数.这个函数会接受到三个参数,第一个是一个数组 arr.会包含以下的元素

1. 在首个替换位之的空字符串 ""
2. 首个替换位与第二个替换位之间的字符串 items cost $
3. 第二个替换位之后的字符串 "."

第二个参数会是10, 也就是 ${conut} 变量的解释值. 会成为 args 数组的第一个元素.

第三个也就是最后一个,会是 ${(conut * price).toFixed()} 的解释值 2.50,并且是args数组的第二个元素

示例如下:

["","items cost $","."]
[10,2.50]

需要注意的是 第一个参数数组的第一个元素是一个空字符串,以确保arr[0],总是在字符串的起始分,

也就是正如 arr[arr.length – 1] 总是是字符串的结尾部分.同时替换的元素数量也总比字符量元少1

就意味着,args.length === arr.length-1的值是 true;

在当前这种情况下,,可以交替使用arr 和 args 数组来创建一个结果字符串;

用arr中首个元素开始。。。后面紧跟着args的首个元素。。以此反复。直到结果字符串被全部创建完毕

function fn(arr,...args){
    let result = "";
    // 直接使用args的元素数量来进行循环
    for(let i=0;i<args.length;i++){
    result += arr[i];
    result += args[i];
}
    result += arr[arr.length - 1]
    return 1;
}

let conut = 10;
let price = 0.25;
let msg = fn`${conut} items cost $${(conut * price).toFixed()}.`;

console.log(msg)

在以上这个例子中定义了 fn 标签,能够执行与模板字面量的默认行为相同的换操作,唯一的需要注意的是在循环中使用args.length,而不是arr.length用来避免args的数组越界,这是冂es6对 arr 和 …args 一个定义;

…args中包含的值不必是字符串,也可以是计算后的结果.