javascript的模板字符串是什么_如何嵌入表达式?

15次阅读

javaScript模板字符串用反引号定义,支持多行书写和${…}表达式插值,可嵌入变量、运算、函数调用等,保留空白与换行,但${}内不可写语句。

javascript的模板字符串是什么_如何嵌入表达式?

javascript 的模板字符串(Template Literal)是用反引号 ` 包裹的字符串,支持多行书写和嵌入表达式,比传统单引号或双引号字符串更灵活。

模板字符串的基本写法

用反引号代替单/双引号即可创建模板字符串:

const str = `Hello World`;
它和 "Hello World" 功能一致,但多了两项关键能力:换行保留和表达式插值。

在模板字符串中嵌入表达式

使用 ${...} 语法,把任意 JavaScript 表达式写在里面,运行时自动求值并转为字符串拼接进去:

  • const name = "Alice"; console.log(`Hi, ${name}!`); → 输出 Hi, Alice!
  • const a = 5; const b = 3; console.log(`Sum: ${a + b}`); → 输出 Sum: 8
  • console.log(`Length: ${"hello".length}`); → 输出 Length: 5
  • 甚至可以调用函数:console.log(`Time: ${new date().toLocaleTimeString()}`);

支持多行与空白字符

模板字符串原生支持换行,缩进和空格都会被保留:

立即学习Java免费学习笔记(深入)”;

const html = `

Title

Content here.

`;
这比用 + 拼接或 n 转义清晰得多。

注意点与常见误区

反引号不能替换成单/双引号 —— ${...} 只在反引号内生效;
表达式必须写在 ${} 内部,外面不能加空格(如 ${ x } 可以,但 $ {x} 会报错);
表达式里可访问当前作用域变量,但不能直接写语句(比如不能写 ${if(x){} else{}},需用三元运算符或提前计算好)。

text=ZqhQzanResources