模版字符串概念和用途

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

简单的说模版字符串就是用来处理一些特殊的字符、数据展示、react模版时用来占位的一种特殊写法,以一种更优雅的方式来表示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 旧方式
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// 新方式
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// 最终结果
// "Fifteen is 15 and
// not 20."

语法形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 单行字符串
`string text`
// 多行字符串 方便换行
`string text line 1
string text line 2`
// 嵌套模板
`string text ${expression} string text`
// 根据不同的状态展示不同的class
const classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
// 自定义的标签函数处理模板字符串
tag `string text ${expression} string text`

如何解决繁琐的正则

  • 直接使用common-tags库,解决一些基础的去除空格,数据处理问题,更多使用方式请查看文档