跳转到主要内容
模块 2 · 第 1 课（共 4）课程中的5/32~8 min
模块课程（1/4）

字符串和模板文字

字符串是字符序列。在 JavaScript 中你可以分隔它们 三种方式，都相当于发动机——但具有一种超能力 为反引号保留：

JS
'single quotes';
'double quotes';
`backticks — template literals`;

单引号和双引号可以互换：使用任何一个 避免转义文本中的其他字符：

JS
'L\'isola'; // the apostrophe needs to be escaped
"L'isola"; // here it doesn't
"He said \"hi\"";
'He said "hi"';

转义字符

在任何字符串中，您可以插入“不可打印”字符 反斜杠：

  • \n — 换行符
  • \t — 选项卡
  • \\ — 文字反斜杠
  • \' / \" — 文字单/双引号
JS
console.log('line 1\nline 2');
// line 1
// line 2

模板文字：默认情况下要使用的语法

反引号解锁了其他分隔符不可能完成的两件事：

  1. 多行字符串不带转义符：允许文字换行。
  2. 插值：在${ … }中你可以放置任何JS表达式 它的值被粘贴到结果中。
JS
const nome = 'Anna';
const eta = 28;

const messaggio = `Ciao ${nome}, hai ${eta} anni.
Fra un anno ne avrai ${eta + 1}.`;

${ … } 中的表达式不必是一个简单的名称：它可以是 任何产生值的东西，包括函数调用和运算符。

与 + 连接

历史上，字符串是由 + 组成的。它仍然有效，而且很有用 在极少数情况下（例如，通过多个步骤构建字符串）：

JS
const a = 'Ciao';
const b = 'mondo';
a + ', ' + b + '!'; // 'Ciao, mondo!'

尝试一下

锻炼#js.m2.l1.e1
尝试：0加载中...

给定“name = 'Luca'”和“age = 30”，用模板文字组成字符串“Luca ha 30 anni”。 （正是这个文本）作为最后一个表达式。

正在加载编辑器...
显示提示

使用反引号和 ${...} 插值将值插入到字符串中。

3 次尝试后可用的解决方案

复习练习

锻炼#js.m2.l1.e2
尝试：0加载中...

给定两个价格“p1 = 7.5”和“p2 = 3.20”，返回字符串“Totale：10.7 euro”作为最后一个表达式。

正在加载编辑器...
显示提示

在 ${...} 中可以放置任何表达式，包括 p1 + p2。

3 次尝试后可用的解决方案