ES6中模板字符串

模板字符串,是ES6标准新引入的一种字符串.说到底,它还是字符串,只是和以前的字符串比起来,有了一些特殊的地方.

模板字符串(template string),是ES6标准之前的es版本的字符串的增强版,但它的本质上还是字符串,用反引(电脑键盘中ESC下面的那个键)号标识.它可以当作普通的字符串来使用,也可以定义多行字符串,而且在定义多行字符串的时候还会保持字符串的格式;也可以在字符串中嵌入变量以及任何合法的js表达式.

1.作普通的字符串来使用

let tmpStr = `Hello world!`;

这种普通的字符串,和我们之前使用双引号或者单引号定义的字符串除了引号的区别外,没有别的任何区别.

2.多行字符串

模板字符串在表示多行字符串的时候,它会把字符串的格式也会保存下来.即我们在定义这个模板字符串变量的时候,它表示的多行自负串是什么格式的,那么它输出这个变量值的时候,也会把这个字符串原样输出出来,包括缩进等格式.如我们定义一个多行的模板字符串:

let multiStr = `
    <div class="box">
        <div class="hd">
            <h2>模块标题</h2>
        </div>
        <div class="bd">
            <!--模板内容-->
        </div>
    </div>
`;

我们把这个模板字符串打印出来:

它不光把字符串的内容打印了出来,而且把字符串的缩进等格式也打印了出来.

这个时候我们可以通过使用trim()方法将格式清除.

虽然我们使用了trim()去掉了模板字符串的格式,但是通过打印我们并没有明显的效果看出来,仅有的一点效果就是第一行的效果紧靠在了当前行的起始位置.这个好像不能明确的说明去除了格式样式,以后把这一块理解透了,再回来补这一块的内容.

let multiStr = `
    <div class="box">
        <div class="hd">
            <h2>模块标题</h2>
        </div>
        <div class="bd">
            <!--模板内容-->
        </div>
    </div>
`;
console.log(multiStr.trim());

3.模板字符串中嵌入变量

以前我们在字符串中嵌入变量的时候,会使用字符串拼接变量的方式来实现.比如我们的页面中有一个空的ul元素,然后根据一定的条件想动态的向这个ul元素中添加一些li元素.具体如下:

    <ul class="list">
        
    </ul>

有一个空的ul元素,然后根据一定的条件向ul中动态的添加li元素:

for(var i = 1; i < 5; i++){
    var strHtml = "<li>" + i + "个元素</li>";
    $(".list").append(strHtml);
}

最终实现的效果如下:

这里的1,2,3,4是变量,这里实现效果和功能没有任何问题,但对我们的要求是有点高的,我们一不小心就可能会把引号的对应关系给混淆出错了.

我们可以尝试使用模板字符串中嵌入变量的方式来实现一下.

模板字符串中嵌入变量,需要将变量名写在${}中.

for(var i = 6; i < 10; i++){
    var strHtml = `<li>${i}个元素</li>`;
    $(".list").append(strHtml);
}

新的实现方式,看起来干净整洁,也不用担心引号的配对闭合问题出错,代码也显得有逼格.

4.模板字符串中可以嵌入任意合法的js表达式,可以进行算术运算以及对对象属性的引用

//对变量的算术运算
var x = 2;
var y = 3;
console.log(`${x} + ${y} = ${x + y}`); //2 + 3 = 5
console.log(`${x} + ${ y * 2} = ${x + y*2}`); //2 + 6 = 8


//对对象属性的引用
var User = {
    name: "Nicholas",
    job: "Teacher"
};
console.log(`${User.name}`); //Nicholas

除了嵌入的这些常规的变量的算术匀速以及对象属性的引用之外,也可以对函数进行调用.简单的理解一下,函数的调用是通过函数名来调用的,我们就可以简单的理解为函数名就是一个变量,那么我们在模板字符串中对函数的调用其实就是对普通变量的引用.

function output(){
    return "Hello world!";
}
console.log(`${output()}`); //Hello world!

模板字符串,不管我们表面上看起来模板字符串处理的或者是普通字符,或者是多行字符串,又或者是js表达式以及对对象属性的调用和函数的调用,但本质上都是对字符串的操作,如果{}中的内容不是一个字符串,那么就按照js中的数据类型转换规则将非字符串类型的内容转换为字符串.比如{}中的内容是一个对象,那么就调用对象的toString()方法将对象转换成字符串.

模板字符串中的变量,是需要先声明过的变量.如果使用了没有声明过的变量,将会报错.