你不知道的模版字符串

你不知道的模版字符串之模版字符串标记

下面代码控制台会输出什么？

const value1 = "秋葵";
const value2 = "香菜";
const name = `熊哥喜欢吃${value1}，还喜欢吃${value2}`;

console.log(name);
复制代码

太简单了，肯定是熊哥喜欢吃秋葵，还喜欢吃香菜

那如果代码是这样的呢，控制台会打印什么？

const value1 = "秋葵";
const value2 = "香菜";
const name = myTag`熊哥喜欢吃${value1}，还喜欢吃${value2}`;

function myTag(){

}

console.log(name);
复制代码

有些人可能能猜到会打印undefined，确实会，但为什么会有这样的现象呢？

原来在模版字符串前面加上标记函数，模版字符串就不单纯的是模版字符串了，他的返回值完全由标记函数的返回值控制。myTag的返回值为undefined。所以模版字符串打印的值为undefined。

const value1 = "秋葵";
const value2 = "香菜";
const name = myTag`熊哥喜欢吃${value1}，还喜欢吃${value2}`;

// 第一个参数为被模版字符串切割的字符串，value1为${value1}的值，value2为${value2}的值
function myTag(strArr, value1, value2){
    console.log(strArr, value1, value2);
}

复制代码

但是这样写参数到时候如果存在多个${}怎么办呢？可以使用…展开运算符，或者都使用arguments处理也可以，比如我要实现一个跟模版字符串一摸一样的功能可以这样写

const value1 = "秋葵";
const value2 = "香菜";
const name = myTag`熊哥喜欢吃${value1}，还喜欢吃${value2}...`;

// 第一个参数为被模版字符串切割的字符串，value1为${value1}的值，value2为${value2}的值
function myTag(){
    
    const argArr = [...arguments];  // 将arguments转换为真数组
    const strArr = argArr[0].raw;   // 获取字符串数组 ["熊哥喜欢吃", "，还喜欢吃", ""]
    const valArr = argArr.slice(1);  // 获得所有${}值的数组 ["秋葵", "香菜"]
    let str = '';

    for(let i = 0; i < valArr.length; i ++){
        str += strArr[i] + valArr[i];
        if(i == valArr.length - 1){
            str += strArr[i + 1];
        }
    }

    return str;
}

console.log(name);  //熊哥喜欢吃秋葵，还喜欢吃香菜...

复制代码

还比如可以对转义字符的处理，我就想让字符串按照格式输出忽略转义字符串，可以用内置的一个函数String.raw

const name = 'a\nb';
console.log(name);  //a
                    //b

// 使用String.raw就会原封不动的输出啦，自己想感兴趣也可以去实现一下，使用正则也十分简单
const name = String.raw`a\nb`;
console.log(name);  //a\nb
复制代码