深入了解 ES6 模板文字

短命女 2023-10-01 19:05 15阅读 0赞

今天我们将转向**模板文字**。它们是什么，我们如何使用它们以及它们有什么用处。

模板字面量是 ES6 中的一个新特性，可以更轻松地处理字符串和字符串模板。您将文本包装起来`` `backticks` ``，您将获得下面描述的功能。

*  您可以在其中插入变量
 *  您实际上可以使用*任何类型的表达式*进行插值，而不仅仅是变量
 *  它们可以是**多行的**。*最后！*
 *  您可以构建不解释反斜杠的*原始模板*

此外，您还可以定义*一个方法*来决定如何制作模板，而不是使用默认的模板行为。这个有一些有趣的用例。

> 让我们深入研究模板文字，看看我们能想出什么。

### **[使用模板文字][Link 1]** ###

我们已经介绍了基本的*`` `I'm just a string` ``*. 可能值得一提的模板文字的一个方面是，您现在可以在其中声明带有引号`'`和`"`引号的字符串，而无需转义任何内容。

var text = `I'm "amazed" that we have so many quotation marks to choose from!`

这很整洁，但肯定有更多有用的东西我们可以应用模板文字。一些*实际的插值*怎么样？您可以`${expression}`为此使用符号。

var host = 'ponyfoo.com'
    var text = `this blog lives at ${host}`
    console.log(text)
    // <- 'this blog lives at ponyfoo.com'

我已经提到你可以有任何你想要的表达方式那里. 将您放入其中的任何表达式视为在模板运行之前定义一个变量，然后将该值与字符串的其余部分连接起来。这意味着您使用的变量、您调用的方法等都应该在当前范围内可用。

以下表达式都可以正常工作。由我们决定在插值表达式中塞入多少逻辑。

var text = `this blog lives at ${'ponyfoo.com'}`
    console.log(text)
    // <- 'this blog lives at ponyfoo.com'
    var today = new Date()
    var text = `the time and date is ${today.toLocaleString()}`
    console.log(text)
    // <- 'the time and date is 8/26/2015, 3:15:20 PM'
    import moment from 'moment'
    var today = new Date()
    var text = `today is the ${moment(today).format('Do [of] MMMM')}`
    console.log(text)
    // <- 'today is the 26th of August'
    var text = `such ${Infinity/0}, very uncertain`
    console.log(text)
    // <- 'such Infinity, very uncertain'

多行字符串意味着您不再需要使用这些方法。

var text = (
      'foo\n' +
      'bar\n' +
      'baz'
    )
    var text = [
      'foo',
      'bar',
      'baz'
    ].join('\n')

相反，您现在可以只使用反引号！请注意，间距很重要，因此您可能仍希望使用括号来使第一行文本远离变量声明。

var text = (
    `foo
    bar
    baz`)

*例如*，当您拥有要插入一些变量的一大块 HTML时，多行字符串真的很出色。与[JSX][]非常相似，您完全可以使用表达式来迭代集合，并使用`return`另一个模板文字来声明列表项。这使得在模板中声明子组件变得轻而易举。还要注意我是如何[使用解构][Link 2]来避免在我的每个表达式前面加上前缀的`article.`，我喜欢将其视为*“一个`with`块，但不是疯狂的”*。

var article = {
      title: 'Hello Template Literals',
      teaser: 'String interpolation is awesome. Here are some features',
      body: 'Lots and lots of sanitized HTML',
      tags: ['es6', 'template-literals', 'es6-in-depth']
    }
    var {title,teaser,body,tags} = article
    var html = `<article>
      <header>
        <h1>${title}</h1>
      </header>
      <section>
        <div>${teaser}</div>
        <div>${body}</div>
      </section>
      <footer>
        <ul>
          ${tags.map(tag => `<li>${tag}</li>`).join('\n      ')}
        </ul>
      </footer>
    </article>`

以上将产生如下所示的输出。请注意间距技巧如何足以正确缩进`<li>`标签。

<article>
      <header>
        <h1>Hello Template Literals</h1>
      </header>
      <section>
        <div>String interpolation is awesome. Here are some features</div>
        <div>Lots and lots of sanitized HTML</div>
      </section>
      <footer>
        <ul>
          <li>es6</li>
          <li>template-literals</li>
          <li>es6-in-depth</li>
        </ul>
      </footer>
    </article>

原始模板本质上是相同的，您只需在模板文字前加上`String.raw`. 这在某些用例中非常方便。

var text = String.raw`The "\n" newline won't result in a new line.
    It'll be escaped.`
    console.log(text)
    // The "\n" newline won't result in a new line.
    // It'll be escaped.

您可能已经注意到这`String.raw`似乎是模板文字语法的一个特殊部分，而且您是对的！您选择的方法将用于解析模板。模板字面量方法——称为*“标记模板”* ——接收一个包含模板静态部分列表的数组，以及各自变量上的每个表达式。

例如，像下面这样的函数调用中的模板字面`` `hello ${name}. I am ${emotion}!` ``量将参数传递给*“标记模板” 。*

fn(['hello ', '. I am', '!'], 'nico', 'confused')

您可能会对参数的排列方式看起来很奇怪感到困惑，但是当您这样考虑时，它们开始变得有意义：对于模板数组中的每个项目，其后面都有一个表达式结果。

### **[揭秘标记模板][Link 3]** ###

我在下面写了一个示例`normal`方法，它的工作*方式与默认行为完全相同*。这可能会帮助您更好地了解模板文字的幕后情况。

> 如果你不知道是什么`.reduce`，请参阅[MDN][]或我的[“Fun with Native Arrays”][Fun with Native Arrays]文章。当您尝试将一组值映射为可以从该集合计算的单个值时，Reduce 总是有用的。

在这种情况下，我们可以通过添加前面和后面来减少`template`开始`template[0]`，然后减少所有其他部分。`expression``part`

function normal (template, ...expressions) {
      return template.reduce((accumulator, part, i) => {
        return accumulator + expressions[i - 1] + part
      })
    }

`...expressions`语法在 ES6 中也是新的。它被称为[“剩余参数语法”][Link 4]，它基本上会将传递给`normal`它的所有参数`template`放在一个数组中。您可以尝试如下所示的标记模板，您会注意到您得到的输出与省略`normal`.

var name = 'nico'
    var outfit = 'leather jacket'
    var text = normal`hello ${name}, you look lovely today in that ${outfit}`
    console.log(text)
    // <- 'hello nico, you look lovely today in that leather jacket'

既然我们已经弄清楚了标记模板是如何工作的，那么我们可以用它们做什么呢？好吧，我们想要什么。一个可能的用例可能是让用户输入大写，把我们的问候变成听起来更讽刺的东西——*我用来自 Arrested Development 的 Gob 的声音在脑海中大声读出结果，现在我一个人在笑。我犯了一个巨大的错误*。

function upperExpr (template, ...expressions) {
      return template.reduce((accumulator, part, i) => {
        return accumulator + expressions[i - 1].toUpperCase() + part
      })
    }
    var name = 'nico'
    var outfit = 'leather jacket'
    var text = upperExpr`hello ${name}, you look lovely today in that ${outfit}`
    console.log(text)
    // <- 'hello NICO, you look lovely today in that LEATHER JACKET'

显然，标记模板的用例比嘲笑自己要有用得多。事实上，你可能会因为标记模板而发疯。一个非常有用的用例是自动清理模板中的用户输入。给定一个所有表达式都被认为是用户输入的模板，我们可以用[insane][]它来清除我们不喜欢的 HTML 标记。

import insane from 'insane'
    function sanitize (template, ...expressions) {
      return template.reduce((accumulator, part, i) => {
        return accumulator + insane(expressions[i - 1]) + part
      })
    }
    var comment = 'haha xss is so easy <iframe src="http://evil.corp"></iframe>'
    var html = sanitize`<div>${comment}</div>`
    console.log(html)
    // <- '<div>haha xss is so easy </div>'

*现在没那么容易了！*

> 我绝对可以看到我在 JavaScript 中使用的唯一字符串以反引号开始和结束的未来。

[Link 1]: https://ponyfoo.com/articles/es6-template-strings-in-depth#using-template-literals
[JSX]: https://ponyfoo.com/articles/react-jsx-and-es6-the-weird-parts
[Link 2]: https://ponyfoo.com/articles/es6-destructuring-in-depth
[Link 3]: https://ponyfoo.com/articles/es6-template-strings-in-depth#demystifying-tagged-templates
[MDN]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
[Fun with Native Arrays]: https://ponyfoo.com/articles/fun-with-native-arrays#computing-with-reduce-reduceright
[Link 4]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters
[insane]: https://github.com/bevacqua/insane