js 模板字面量和模板字面量标签函数

模板字面量和模板字面量标签函数

模板字面量

模板字面量为ES6新增，用来定义字符串的能力。与’'和""不同的是，它能保留换行符，可以跨行定义字符串。

//保留换行符
let str = `hello
world`;
console.log(str);
//hello
//world

//顾名思义，模板字面量在定义模板时特别有用
let pageHTML = `
<div>
    <a href="#">
        <span>Jony Xin</span>
    </a>
</div>`;

//使用时需要注意几点：
//1.以换行符开头的模板字面量
console.log(pageHTML[0]);	//(换行符)
console.log(pageHTML[0] === '\n');	//true
//2.缩进量
str = `hello
    world`;
console.log(str.length);	//15	[5+1换行符+4空格+5]
//等价于"hello\n    world";
let str2 = "hello\n    world";
console.log(str === str2);	//true

字符串插值

支持字符串插值是模板字面量最常用的一个特性。

从技术上讲，模板字面量不是字符串，而是一种特殊的JavaScript句法表达式，只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例，任何插入的变量也会从他们最接近的作用域中取值。

let str1 = 'hello',str2 = 'world';
//以前字符串插值
let str3 = str1 + ',' + str2;
//现在字符串插值
let str4 = `${str1},${str2}`;
console.log(str3);	//hello,world
console.log(str4);	//hello,world

//所有插入的值都会使用toString()强制转换为字符串


//在插值表达式中可以调用函数和方法
function capitalize(word){
    return `${ word[0].toUpperCase() }${word.slice(1)}`;
    //string.toUpperCase() 用于将字符串转换为大写
    //slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
    //slice() 方法可从已有的数组中返回选定的元素。
}
console.log(`${ capitalize('hello') },${ capitalize('world') }`);	//Hello,World

模板字面量标签函数

可通过标签函数自定义插值行为。废话不多说我们先上例子：

let a = 6;
let b = 9;

function simpleTag(strings, aVal, bVal, sumVal) {
    console.log(strings);
    console.log(aVal);
    console.log(bVal);
    console.log(sumVal);

    return 'foobar';
}
let untaggedRes = `${a} + ${b} = ${a + b}`;
let taggedRes = simpleTag`${a} + ${b} = ${a + b}`;
// ['', ' + ', ' = ', '', raw: Array(4)]
//6
//9
//15

console.log(untaggedRes);   //6 + 9 = 15
console.log(taggedRes);     //foobar

1. 标签函数会接收 被插值记号分割后的模板 和 对每个表达式求值的结果

   • 被插值记号分割后的模板——可以想象把插值想象成一个个挡板，将模板字面量中其他的字符给分开，如插值${a}将’’[空串]和’ + '分开
   • 所以可以得出对于一个有n个插值的模板字面量，传给标签函数表达式参数的个数始终是n个，标签函数接受n+1个参数（1个被插值记号分割后的模板+ n个插值表达式求值的结果），标签函数第一个参数所包含的字符串个数始终是n+1个（n个’挡板’能分成n+1个区域）。

2. 因为表达式参数是数量是可变的，所以通常使用剩余操作符（rest operator）将他们收集到一个数组中。

   function simpleTag(strings, ...expressions) {
       console.log(strings);
       for(const expression of expressions){
           console.log(expression);
       }
       
       return 'foobar';
   }
   let taggedRes = simpleTag`${a} + ${b} = ${a + b}`;
   // ['', ' + ', ' = ', '', raw: Array(4)]
   //6
   //9
   //15
   console.log(taggedRes);     //foobar