ES6模版字符串 ${}

最新推荐文章于 2024-11-21 11:22:51 发布

原创最新推荐文章于 2024-11-21 11:22:51 发布 · 543 阅读

CC 4.0 BY-SA版权

20 篇文章

订阅专栏

本文介绍了JavaScript模板字符串的使用方法，包括语法、变量嵌入、表达式运算、多行字符串处理和函数调用。通过实例演示了如何利用模板字符串提高代码可读性和灵活性。

1、语法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

2、模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。

模板字符串可以自动识别换行，空格等操作

模板字符串中可以使用字符串插值

3、字符串中嵌入变量，要将变量名写在${}之中

var name = "Bob", time = "today"; 
`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?

4、插入表达式，大括号内可以放入任意的JavaScript表达式，可以进行运算，以及引入对象属性。

在普通字符串中嵌入表达式，必须使用如下语法：

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

现在通过模板字符串，我们可以使用一种更优雅的方式来表示：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

使用对象属性

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

5、如果使用模版字符串表示多行字符串，空格、缩进和换行都会被保留

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

6、模版字符串还可以调用函数

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar