ES6: 模板字符串

ES6中引入了模板字符串(Template Literal),是创建字符串的一种新方法。有了这个新特性,我们就能更好地控制动态字符串。这将告别长串连接字符串的日子。

要创建一个模板字符串,我们可以使用反引号(撇号)字符替找单引号'"。这将产生一个新的字符串,我们可以以任何方式使用它。

基本用法:

let newString = `A string`;

多行

模板字符串最大的好处在于,可以使用它创建多行字符串。在过去,如果想要创建一个多行的字符串,必须使用\n或换行字符。

// ES5
var myMultiString = 'Some text that i want\nOn two lines!'

使用一个模板字符串,我们可以直接将换行添加到字符串中,就像我们写的那样:

var myMultiString= `This will be
on two lines!`;

这将生成一个字符串,其中包含一个换行。使用这种方式创建多行字符串,如果第二行有空白字符串的话,那么这些空白字符串都是字符串本身的一部分。比如:

var myMultiString = `This will be
on two lines`;
var myMultiString2 = `This will be
           on two lines`;

console.log(myMultiString);
console.log(myMultiString.length);
console.log(myMultiString2)
console.log(myMultiString2.length);

使用表达式进行操作的能力使用模板字符串成为一种非常漂亮的模板语言,用于构建我们后成所要讲的HTML占位符是非常有用。但是连接呢?让我们看看如何动态地将值添加到新的模板文件中。

表达式

在新的模板字符串中有了表达式的功能,它们看起来像这样:${expression}。比如像下面这样的代码:

let name = `Ryan`;
console.log(`Hi my name is ${name}`);

${}允许我们在大括号中添加一个表达式,它将产生一个值。在我们的示例中,它只包含了一个字符串变量name。这里有一些需要注意的地方:如果你想添加一个值,像上面的代码一样,那么你不需要在模板字符串中使用name变量。你可以直接使用这个值。

console.log(`Hi my name is ${Ryan}`);

输出的结果是相同的。这些表达式不仅可以让我们放入包含字符串的变量,也可以放置我们想要的任何表达式。

let price = 19.99;
let tax = 1.13;
let total = `The total prices is ${price * tax}`;
console.log(total);  // => The total prices is 22.588699999999996

我们也可以用于一个更为复杂的对象:

let person = {
    firstName: `Ryan`,
    lastName: `Christiani`,
    sayName() {
        return `Hi my name is ${this.firstName} ${this.lastName}`;
    }
}
console.log(person.sayName());  // => Hi my name is Ryan Christiani

这里有一个person对象,对象中有一个sayName()方法。我们可以从${}语法内访问对象的属性。

HTML模板

使用多行字符串并使用模板表达式将内容添加到我们的字符串中,这使得在我们的代码中使用HTML模板变得非常简易好用。

假设我们从一个API中得到一些数据看起来像这样:

{
    "id": 1,
    "name": "Bulbasaur",
    "base_experience": 64,
    "height": 7,
    "is_default": true,
    "order": 1,
    "weight": 69,
    ...
}

这个我们假想的pokeapi,使用这个数据结构创建一个可以显示Pokemon的HTML模板。

function createMarkup( data ) {
    return `
        <article class='pokemon'>
            <h3>${ data.name }</h3>
            <p>The Pokemon ${ data.name } has a base experience of ${ data.base_experience }, they also weigh ${ data.weight }</p>
        </article>
    `
}

不再需要使用像Handlebars或者Mustache这样的库就可以在JavaScript中创建漂亮易用的模板。

标签模板

模板字符串的另一个特性就是能够创建带标签的模板字符串(Tagged Template Literals)。创建可以像创建其他函数的方式一样创建一个函数,但是当你调用它时它看起来就和其他的函数调用不一样:

function myTaggedLiteral (strings) {
    console.log(strings)
}

myTaggedLiteral`test`;

注意,函数调用没有使用(),这里使用模板字符串来替代。作为函数的一个参数,函数返回的是一个字符串数组。我们来扩展一下这个函数的字符串,它将包含一个表达式,而且我们还在函数中包含一个新的参数。

function myTaggedLiteral(strings, value) {
    console.log(strings, value);
}
let someText = 'Neat';

myTaggedLiteral`test ${ someText }`;

当我们使用一个表达式时,我们可以从下一个参数中访问它。来看另一个示例,添加另一个表达式。

function myTaggedLiteral(strings, value, value2) {
   
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/template-literals.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部