ES6模板字符串详解

修己xj

发布于 2024-07-04 12:12:27

18300

代码可运行

文章被收录于专栏：修己xj

运行总次数：0

代码可运行

ES6是JavaScript语言的一次重大更新，引入了许多新特性和语法改进，其中模板字符串是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值，并赋给对应的变量，让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。

什么是模板字符串？

模板字符串是ES6中引入的一种新的字符串字面量，它允许嵌入变量、表达式和换行符。模板字符串使用反引号（`）包裹，可以跨越多行并且可以包含嵌入的变量和表达式。

用法

字符串中嵌入变量

在字符串中嵌入变量极大的简化了原来字符串拼接的写法，提高了代码的简洁性和可读性,嵌入的变量需要写在${}中

let userName = '修己';
let userAge = 30;
let intro = `His name is ${userName}. He is ${userAge} years old.`
console.log(intro);  //His name is 修己. He is 30 years old.

多行字符串

传统的JavaScript字符串不能跨越多行，而模板字符串可以：

let userName = '修己';
let userAge = 30;
let intro =`His name is ${userName}.
He is ${userAge} years old.
He looks very handsome`
console.log(intro);  
//His name is 修己.
//He is 30 years old.
//He looks very handsome

可进行变量运算

let x = 1;
let y = 2;
let desc = `${x} + ${y} = ${x + y}`;
console.log(desc); //  1 + 2 = 3

可进行函数调用

let desc = `个人信息：${this.userInfo()}`;
console.log(desc); //  个人信息：His name is 修己. He is 30 years old.

userInfo(){
    return 'His name is 修己. He is 30 years old.';
}