技术教程

ES6模板字符串 在字符串中拼接变量的利器!

微信扫一扫,分享到朋友圈

ES6模板字符串 在字符串中拼接变量的利器!
0 0

最近在折腾的时候发现ES6中的模板字符串,非常实用~

从下图代码可见,非常方便!

按照以往的方法要拼接字符,那是一个复杂,各种双引号和+号 真的太麻烦了

模板字符串用反引号 ` 标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

这种语法是能够允许嵌入表达式的字符串字面量 模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。

模板字符串可以包含特定语法(${expression})的占位符,占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。

如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。

多行字符串:

            //原始
            console.log("string text line 1\n\string text line 2");
            // "string text line 1
            // string text line 2"    
            //模板字符串
            console.log(`string text line 1 
string text line 2`);
            // "string text line 1
            // string text line 2"

表达式插补:

let a = 5,b = 1; 
console.log(`a的值为${a}, b的值为${b}, a+b的值为${a+b}`) 
// 对应的打印出来的结果为:a的值为5, b的值为1, a+b的值为6

带标签的模板字符串:

            var a = 5;
            var b = 10;

            function tag(strings, ...values) {
                console.log(strings[0]); // "Hello "
                console.log(strings[1]); // " world "
                console.log(values[0]); // 15
                console.log(values[1]); // 50
                return "Bazinga!";
            }
            console.log(tag `Hello ${ a + b } world ${ a * b}`);
            // "Bazinga!"

在标签函数的第一个参数中,存在一个特殊的属性raw ,可以通过它来访问模板字符串的原始字符串:

            function tag(strings, ...values) {
                console.log(strings.raw[0]);
                // "string text line 1 \n string text line 2"
            }
            tag `string text line 1 \n string text line 2`;

 

分享个电子书《物联网设计:从原型到产品》人民邮电出版社 高清PDF带书签

上一篇

Android8.0+ startService报错问题解决

下一篇

你也可能喜欢

发表评论

插入图片
ES6模板字符串 在字符串中拼接变量的利器!

长按储存图像,分享给朋友