使用一个反引号 `` 用来包含普通字符串,而不是之前的双引号或单号
let msg = `hello ES6`;
console.log(msg)在以上这 个案例中,并没有感受到和之前有什么不一样.
如果想要输出反引号 `` 可以使用 转义符 \
let msg = `\`hello ES6\``;
console.log(msg)在模板字符串里面.如果想要输出单引号或双引号.就不需要转义符 \
let msg = `"hello"'ES6'`;
console.log(msg)在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.会包含以下的元素
第二个参数会是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中包含的值不必是字符串,也可以是计算后的结果.
2 条评论