返回

深入探索 ES2015 新特性：块级作用域、箭头函数、const 与 template literals

前端

块级作用域

在 ES2015 之前，JavaScript 中只有全局作用域和函数作用域。这意味着，在一个函数中定义的变量或常量可以在函数的任何地方访问，甚至在函数外也可以访问。这可能会导致一些问题，例如变量命名冲突和意外的副作用。

ES2015 中引入的块级作用域解决了这个问题。块级作用域允许你在代码块中定义变量或常量，这些变量或常量只在该代码块中有效。这可以防止变量命名冲突，并使代码更加清晰易懂。

要创建一个块级作用域，你可以在代码块的开头使用 let 或 const 来声明变量或常量。例如：

{
  let x = 10;
  const y = 20;
}

console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

在上面的代码中，变量 x 和常量 y 都被声明在代码块中，因此它们只在该代码块中有效。当代码块执行完后，这两个变量和常量都会被销毁。

箭头函数

箭头函数是 ES2015 中引入的另一种新特性。箭头函数是一种简写形式的函数声明，它可以让你更简洁地编写代码。

箭头函数的语法如下：

(parameters) => expression

例如：

const add = (a, b) => a + b;

const result = add(1, 2);

console.log(result); // 3

在上面的代码中，我们使用箭头函数定义了一个名为 add 的函数。这个函数接受两个参数 a 和 b，并返回这两个参数的和。

箭头函数有很多优点，例如：

  • 更加简洁
  • 不需要使用 function 关键字
  • 可以省略大括号和 return 关键字
  • 可以使用隐式返回

const

在 ES2015 中，还引入了一个新的关键字 const，它可以用来声明常量。常量与变量不同，一旦声明后就不能被重新赋值。

const 的语法如下：

const PI = 3.14;

在上面的代码中，我们使用 const 关键字声明了一个名为 PI 的常量，并将其值设置为 3.14。

template literals

template literals 是 ES2015 中引入的另一种新特性。template literals 允许你使用模板字符串来创建字符串。模板字符串可以使用嵌入表达式，这使得你可以更方便地将变量和表达式插入到字符串中。

template literals 的语法如下：

const name = 'John Doe';
const age = 30;

const greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting); // Hello, John Doe! You are 30 years old.

在上面的代码中，我们使用 template literals 创建了一个字符串 greeting。这个字符串包含两个嵌入表达式：name 和 age。当模板字符串被执行时，这两个表达式会被计算并插入到字符串中。

template literals 有很多优点，例如：

  • 可以更方便地将变量和表达式插入到字符串中
  • 可以使用多行字符串
  • 可以使用模板字符串标签