模板字面量标签函数和split()方法注意点

模板字面量标签函数

最近新买了红宝石第四版，翻到了关于模板字面量标签函数的用法。简单总结一下。

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

举例

<script>
        let name = "ljx";
        let age = 21;
        // 标签函数strings(第一个参数)为以${}分割的数组，后面的参数对应${}的值
        function myTag(strings, name, age) {
            console.log(strings);
            //["", "my name is ,age is ", ""]
            console.log(name);
            //ljx，对应表达式${name}的结果
            console.log(age);
            //21
            return "successful";
        }
        const res = myTag `${name}my name is ,age is ${age}`
        console.log(res);

    </script>

提醒

值得注意的一点是，这里的原理其实是根据插值记号(${})来进行分割，因此分割的时候(split)会出现几种情况,JavaScript外其他的语言也会如此

1. 当分隔符恰好在最前面的时候，数组第一个肯定是空字符串；
2. 当分隔符恰好在最后面的时候，数组最后一个肯定是空字符串。

举个小例子就很容易理解了

举例 (split（）)

<script>
		// 将字符串分割数组后复原
		//1. 将一个字符串分割成数组
        let str1 = 'bc';
        let st1Arr = str1.split('b');
        console.log(st1Arr);
        // [" ","c"]
        // 细品下看看，如果没有这个空字符串，你就无法从分割出来的数组反推出原字符串吧。比如 str.split('B') == ['C']，你无法知道 str 是 BC 还是 CB 还是 BCB
        
        //2. 将数组拼接成字符串
        let str2 = st1Arr.join('b');
        console.log(str2)
        //'bc'
		
		// 尝试下两种拼接就知道了
		// console.log(['','c'].join('b')); //bc
        // console.log(['c'].join('b')); //c

</script>

表达式参数的数量是可变的，所有通常使用剩余操作符将他们收集到一个数组中

举例（表达式参数数量可变时）

<script>
        const a = 10;
        const b = 20;
        // 参数不固定时，使用剩余操作符
        function simpleTag(strings, ...expreesions) {
            console.log(strings);
            for (const expression of expreesions) {
                console.log(expression);
                // 返回10，20，30
            }
        }
        let taggedResult = simpleTag `${a}+${b}=${a+b}`
    </script>

更多例子可以查阅JavaScript高级程序设计第四版