你可能没见过的 js 模版字符串使用方式

时间：

分类：

js

字数：

525 字

时长：

大约需要 2 分钟

次数：

0 人阅读

js 模板字符串常见的使用场景：

  1. 多行字符串
  2. 字符串中的变量拼接

针对以上的使用场景，看下有没有你没见过的使用方式

多行字符串

如果不使用模版字符串，JS 的多行字符一般会这样做：

1
2
const val = 'hello \n' +
'world';

使用模板字符串：

1
2
3
4
const val = `
hello 
world
`;

使用变量

不使用模版字符串拼接变量：

1
2
const variable = 'world';
const val = 'hello ' + variable;

使用模板字符串：

1
2
const variable = 'world';
const val = `hello ${variable}`;

不转义字符

不使用模版字符串呈现反斜线字符：

1
const val = 'C:\\Users\\Administrator\\Documents';

使用模板字符串：

1
const val = String.raw`C:\Users\Administrator\Documents`;

以上使用场景常见于文件路径呈现，正则表达式呈现等。

函数调用模板字符串

这种使用方式在常规编码中并不常见，多见于模板引擎编写！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function format(strings, ...values) {
  let ret = "";
  console.log(strings); // ["姓名: ", "；年龄：", "；"]
  console.log(values); // ['张三', 18]
  values.forEach((value, index) => {
    ret += `${strings[index]}${value}`;
  });
  ret += strings[strings.length - 1];
  return ret;
}

const name = '张三';
const age = 18;

const info = format`姓名：${name}；年龄：${age}；`;
console.log(info); // '姓名：张三；年龄：18；'

注意 format 函数调用并没像常规函数一样使用括号 format()！

函数调用模板字符串这种方式，可以衍生出更多高级用法，比如将传值部分首字母大写，格式化货币单位，格式化日期等等~~~

性能

跟常规的字符串拼接相比，模板字符串具有更好的性能，原因是 JS 引擎可以在编译时对模板字符串进行优化，从而降低运行时的开销。

如果存在大量的字符串拼接操作，建议可以使用模板字符串，合理的使用模板字符串可以提高代码的可读性及可维护性。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-20/js-template-strings/

如果您觉得文章不错，可以点击文章中的广告支持一下！