JavaScript核心语法（4）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54432917/article/details/144027638

这篇文章主要讲一讲ES6中的另外几种语法，包括模版字符串，解构赋值。

1.模板字符串

ES6（ECMAScript 2015）引入了模板字符串（template strings），也称为模板字面量（template literals），它们提供了一种更强大和灵活的字符串操作方式。模板字符串使用反引号（`）包围，并支持多行字符串、内嵌表达式和标签模板。

基本语法

模板字符串的基本语法如下：

`string text`

多行字符串

模板字符串允许直接在字符串中进行换行，而不需要使用转义字符 \n。

const multiLineString = `这是一个
多行字符串。`;
console.log(multiLineString);
// 输出：
// 这是一个
// 多行字符串。

内嵌表达式

模板字符串支持在字符串中嵌入表达式，使用 ${expression} 语法。

const name = "Alice";
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// 输出：Hello, my name is Alice and I am 25 years old.

内嵌的表达式可以是任意有效的 JavaScript 表达式，包括函数调用：

const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);
// 输出：The sum of 5 and 10 is 15.

总结

模板字符串是 ES6 提供的强大工具，具有以下优点：

多行字符串：无需使用转义字符即可创建多行字符串。
内嵌表达式：可以在字符串中嵌入任意 JavaScript 表达式。

这些特性使得模板字符串在处理动态内容和构建复杂字符串时非常方便。

2.解构赋值

解构赋值是 ES6 引入的一种语法，允许从数组或对象中提取值，并将它们赋值给变量。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

数组解构

数组解构允许你从数组中提取值，并将它们赋值给变量。

基本用法

const [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2

跳过元素

你可以跳过数组中的某些元素：

const [first, , third] = [1, 2, 3];
console.log(first); // 输出 1
console.log(third); // 输出 3

对象解构

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

解构赋值的其他用法

剩余元素

你可以使用剩余元素语法 ... 来获取数组或对象中剩余的部分。

数组中的剩余元素

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 输出 1
console.log(rest);  // 输出 [2, 3, 4]

对象中的剩余属性

const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a);      // 输出 1
console.log(others); // 输出 { b: 2, c: 3 }

总结

解构赋值是一种简洁且强大的语法，允许你从数组或对象中提取值，并将它们赋值给变量。它在处理复杂数据结构时非常方便，特别是在函数参数和嵌套结构中。