javascript基础学习系列十六：模板字面量

Sunny_媛

于 2024-02-18 10:08:15 发布

阅读量205

点赞数 7

文章标签： javascript 学习开发语言软件工程系统架构性能优化架构

本文链接：https://blog.csdn.net/m0_68635815/article/details/136146427

版权

本文介绍了ECMAScript6引入的模板字面量，包括其保留换行、跨行定义字符串的特点，以及在HTML模板中的应用。重点讲解了字符串插值功能，如何在模板中嵌入变量和执行JavaScript表达式，以及注意事项如格式问题和函数调用。

摘要由CSDN通过智能技术生成

ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串。

let myMultiLineString = 'first line\nsecond line';
    let myMultiLineTemplateLiteral = `first line
    second line`;
    console.log(myMultiLineString);
    // first line
    // second line"
    console.log(myMultiLineTemplateLiteral);
    // first line

模板字面量在定义模板时特别有用，比如下面这个 HTML 模板:

let pageHTML = `
<div>
  <a href="#">
    <span>Jake</span>
  </a>
</div>`;

由于模板字面量会保持反引号内部的空格，因此在使用时要格外注意。格式正确的模板字符串看起来可能会缩进不当:

// 这个模板字面量在换行符之后有 25 个空格符 let myTemplateLiteral = `first line
second line`;
console.log(myTemplateLiteral.length); // 47 5
  // 这个模板字面量以一个换行符开头
let secondTemplateLiteral = `
first line
second line`;
console.log(secondTemplateLiteral[0] === '\n'); // true
// 这个模板字面量没有意料之外的字符
let thirdTemplateLiteral = `first line second line`; console.log(thirdTemplateLiteral);
// first line
// second line

1. 字符串插值：

模板字面量最常用的一个特性是支持字符串插值，也就是可以在一个连续定义中插入一个或多个值。

技术上讲，模板字面量不是字符串，而是一种特殊的 JavaScript 句法表达式，只不过求值后得到的是字符串。

模板字面量在定义时立即求值并转换为字符串实例，任何插入的变量也会从它们最接近的作用域中取值。

字符串插值通过在${}中使用一个 JavaScript 表达式实现:


let value = 5;
let exponent = 'second';
// 以前，字符串插值是这样实现的: let interpolatedString =
  value + ' to the ' + exponent + ' power is ' + (value * value);
  // 现在，可以用模板字面量这样实现: 12 let interpolatedTemplateLiteral =
  `${ value } to the ${ exponent } power is ${ value * value }`;
console.log(interpolatedString); // 5 to the second power is 25 console.log(interpolatedTemplateLiteral); // 5 to the second power is 25

所有插入的值都会使用 toString()强制转型为字符串，而且任何 JavaScript 表达式都可以用于插值。

将表达式转换为字符串时会调用 toString():

let foo = { toString: () => 'World' };
    console.log(`Hello, ${ foo }!`);      // Hello, World!

在插值表达式中可以调用函数和方法:

   function capitalize(word) {
      return `${ word[0].toUpperCase() }${ word.slice(1) }`;
}
console.log(`${ capitalize('hello') }, ${ capitalize('world') }!`); // Hello, World!

此外，模板也可以插入自己之前的值:

   let value = '';
    function append() {
      value = `${value}abc`
      console.log(value);
    }
    append();  // abc
    append();  // abcabc
    append();  // abcabcabc