es6——模板字符串

模板字符串

`进行处理的字符串 或者 ${变量（常量）或者 表达式（≠语句）}`

        // 原先的字符串要实现转行或空格等特殊行为，需要用对应的特殊字符进行转义
        const str = '今天\n下暴雨';
        console.log(str);

        // es6提供模板字符串，从而实现对字符串的灵活处理

        const str1 = `今天下暴雨`;
        console.log(str1);

        // 模板字符串 浏览器可识别模板字符串中的任何特殊字符——包括转行、空格.....
        const str11 = `今天
                下暴雨
                `;
        console.log(str11);

        const str111 = `今天
        下暴雨
                `;
        console.log(str111);

        // 内容为表达式时,浏览器会解析模板字符串中的表达式
        const str_ex = `${1+1}`;
        console.log(str_ex);

        // 内容为语句时
        // 浏览器仍会解析语句，并执行语句
        // 但解析和执行的行为会脱离模板字符串的范围
        // 当前语句在模板字符串中被返回undefined

        function fn() {
            console.log("我是fn函数")
        };
        const str_lan = `${fn()}`;
        console.log(str_lan);

输出结果如下:

 标签模板字符串 

对模板字符串进行标记

格式：标记名`模板字符串`

标记是一个函数时，函数参数如下：

参数1：被插值分割的字符串组成的数组

后续参数们：所有插值

        function fun(param1, param2, param3) {
            console.log(param1);
            console.log(param2);
            console.log(param3);
        };
        let name1 = "阿芳";
        let name2 = "阿丽";
        let tagStr = fun `姐妹1${name1}姐妹2${name2}。`;

输出结果：

 标签模板字符串的自定义

        function fun(parts) {
            const values = Array.prototype.slice.apply(arguments).slice(1)
            let str = "";
            for (let i = 0; i < values.length; i++) {
                str += `${parts[i]} : ${values[i]};`;
                // 拼接最后的字符串部分
                if (i == values.length - 1) {
                    str += parts[i + 1]
                };
            };
            return str;
        };

        let name1 = "阿芳";
        let name2 = "阿丽";
        let tagStr = fun `姐妹1${name1}姐妹2${name2}。`;
        console.log(tagStr); //  姐妹1 : 阿芳;姐妹2 : 阿丽;。