前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是模版字符串和标签模版字符串
模版字符串
- 在ES6之前，如果我们想要将字符串和一些动态的变量(标识符)拼接到一起，是非常麻烦和丑陋的(ugly)。
- ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接:
- 首先，我们会使用 `` 符号来编写字符串，称之为模板字符串;
- 其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容;
代码演示
// ES6之前拼接字符串和其他标识符 const name = "yz" const age = 24 const height = 175 console.log("my name is " + name + ", age is " + age + ", height is " + height) // my name is yz, age is 24, height is 175 // ES6提供模板字符串 `` const message = `my name is ${name}, age is ${age}, height is ${height}` console.log(message) // my name is yz, age is 24, height is 175 const info = `age double is ${age * 2}` console.log(info) // age double is 48 function doubleAge() { return age * 2 } const info2 = `double age is ${doubleAge()}` console.log(info2) // double age is 48
标签模版字符串
函数调用的一种特殊形式
- 模板字符串还有另外一种用法:标签模板字符串(Tagged Template Literals)。
- 我们一起来看一个普通的JavaScript的函数:
function foo(m, n, x) { console.log(m, n, x, '---------') } foo("Hello", "World")
- 如果我们使用标签模板字符串，并且在调用的时候插入其他的变量:
- 模板字符串被拆分了;
- 第一个元素是数组，是被模块字符串拆分的字符串组合;
- 后面的元素是一个个模块字符串传入的内容;
// 另外调用函数的方式: 标签模块字符串 // foo`` // foo`Hello World` const name = "why" const age = 18 // ['Hello', 'Wo', 'rld'] foo`Hello${name}Wo${age}rld`
语法
标签模板由标签函数和模板字符串两部分组成。 其中标签函数的名称大家可以根据项目规范随意命名，模板字符串往往是是需要处理的数据内容。
// 语法标准 tag(arrStrings, exp1, exp2, exp3, ...) // 实际使用 foo`Hello${name}Wo${age}rld`
对照着来看
- tag就是函数名
- 如foo = tag
- arrStrings 指的是被
${...}这种表达式分隔的字符串
- 如arrStrings = ['Hello','Wo','rld'] = foo函数中的第一个参数m
exp1, exp2, ...分别表示第1个${...}占位符中表达式的值，第2个${...}表达式的值
- exp1 = ${name} = 'yz' = foo函数中的第二个参数n
- exp2 = ${age} = '18' = foo函数中的第一个参数x
应用场景
标签模板功能很强大，可能一开始并不会觉得厉害之处，平时工作中也不会用到，但是这些知识是有用的，在很多库中会用到它。
react的styled-components
可以直接生成组件，动态生成样式
const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `;
多语言转化(国际化处理)
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!` // "欢迎访问xxx，您是第xxxx位访问者！"
