JavaScript ES6中的简写语法总结与使用技巧(12)

日期：2020-05-11 栏目：程序人生浏览：次

function getParagraph() {
 return `
  Dear Rod,

  This is a template literal string that's indented
  four spaces. However, you may have expected for it
  to be not indented at all.

  Nico
 `
}

我们可以用下面这个功能函数对生成的字符串进行处理已得到我们想要的结果：

function unindent(text) {
 return text
  .split('\n')
  .map(line => line.slice(4))
  .join('\n')
  .trim()
}

不过，使用被称为标记模板的模板字符串新特性处理这种情况可能会更好。

标记模板

默认情况下，JavaScript会把`解析为转义符号，对浏览器来说，以`开头的字符一般具有特殊的含义。比如说\n意味着新行，\u00f1表示ñ等等。如果你不想浏览器执行这种特殊解析，你也可以使用String.raw来标记模板。下面的代码就是这样做的，这里我们使用了String.row来处理模板字符串，相应的这里面的\n没有被解析为新行。

var text = String.raw`"\n" is taken literally.
It'll be escaped instead of interpreted.`
console.log(text)
// "\n" is taken literally.
// It'll be escaped instead of interpreted.

我们添加在模板字符串之前的String.raw前缀，这就是标记模板，这样的模板字符串在被渲染前被该标记代表的函数预处理。

一个典型的标记模板字符串如下：

tag`Hello, ${ name }. I am ${ emotion } to meet you!`

实际上，上面标记模板可以用以下函数形式表示：

tag(
 ['Hello, ', '. I am ', ' to meet you!'],
 'Maurice',
 'thrilled'
)

我们还是用代码来说明这个概念，下述代码中，我们先定义一个名为tag函数：

function tag(parts, ...values) {
 return parts.reduce(
  (all, part, index) => all + values[index - 1] + part
 )
}

然后我们调用使用使用标记模板，不过此时的结果和不使用标记模板是一样的，这是因为我们定义的tag函数实际上并未对字符串进行额外的处理。

var name = 'Maurice'
var emotion = 'thrilled'
var text = tag`Hello, ${ name }. I am ${ emotion } to meet you!`
console.log(text)
// <- 'Hello Maurice, I am thrilled to meet you!'

我们看一个进行额外处理的例子，比如转换所有用户输入的值为大写（假设用户只会输入英语），这里我们定义标记函数upper来做这件事：

function upper(parts, ...values) {
 return parts.reduce((all, part, index) =>
  all + values[index - 1].toUpperCase() + part
 )
}
var name = 'Maurice'
var emotion = 'thrilled'
upper`Hello, ${ name }. I am ${ emotion } to meet you!`
// <- 'Hello MAURICE, I am THRILLED to meet you!'

转载注明出处：http://www.heiqu.com/265.html

JavaScript ES6中的简写语法总结与使用技巧(12)

相关推荐