JavaScript 模板字符串与 es6 中 let 的用法

2022-10-31
陕西
本文字数：1205 字
阅读完需：约 4 分钟

模板字符串

前言：模板字面量是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在 ES2015 规范的先前版本中被称为“模板字符串”。

一、语法

`string text`
`string text line 1 string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`

复制代码

二、描述

模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。

三、多行字符串

在新行中插入的任何字符都是模板字符串中的一部分，使用普通字符串，你可以通过以下的方式获得多行字符串：

console.log('string text line 1\n' +'string text line 2');// "string text line 1// string text line 2"

复制代码

要获得同样效果的多行字符串，只需使用如下代码：

console.log(`string text line 1string text line 2`);// "string text line 1// string text line 2"

复制代码

四、插入表达式

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} andnot ${2 * a + b}.`);// "Fifteen is 15 and// not 20."

复制代码

es6 中 let 的用法

1、let 的引入

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

2、基本用法

{  let a = 10;  var b = 1;}a // ReferenceError: a is not defined.b // 1

复制代码

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

我们在使用for循环的计数器时，就很适合使用let命令，如下：

for (let i = 0; i < 10; i++) {  // ...}console.log(i);// ReferenceError: i is not defined

复制代码

上面代码中，计数器 i 只在 for循环体内有效，在循环体外引用就会报错。如果使用 var，最后输出的是 10。

3、不存在变量提升

var命令会存在“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象会让人觉得很奇怪，按照一般的逻辑，变量应该在声明语句之后才可以使用。

那么为了纠正（避免）这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则会报错。

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;
// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/2b7c370175fafa91c4194ea51】。文章转载请联系作者。

何极光

关注

路虽远，行则必至！ 2022-10-25 加入

何程龙，计算机科学与技术专业毕业，现就任前端开发工程师。曾荣获：CSDN博客专家、签约讲师，中国开源协会-开发分会管理委员会委员。擅长Web前端、JavaScript框架、数据库SQL等领域及技术。

发布

暂无评论

创作场景

JavaScript 模板字符串与 es6 中 let 的用法

模板字符串

一、语法

二、描述

三、多行字符串

四、插入表达式

es6 中 let 的用法

1、let 的引入

2、基本用法

3、不存在变量提升

何极光

评论