现代 CSS

ES6: 模板字符串

作者：大漠 日期：2017-08-01 点击：4064
JavaScript
JavaScript学习笔记
ES6
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

ES6中引入了模板字符串（Template Literal），是创建字符串的一种新方法。有了这个新特性，我们就能更好地控制动态字符串。这将告别长串连接字符串的日子。

要创建一个模板字符串，我们可以使用反引号（撇号）字符替找单引号'或"。这将产生一个新的字符串，我们可以以任何方式使用它。

基本用法：

let newString = `A string`;

多行

模板字符串最大的好处在于，可以使用它创建多行字符串。在过去，如果想要创建一个多行的字符串，必须使用\n或换行字符。

// ES5
var myMultiString = 'Some text that i want\nOn two lines!'

使用一个模板字符串，我们可以直接将换行添加到字符串中，就像我们写的那样：

var myMultiString= `This will be
on two lines!`;

这将生成一个字符串，其中包含一个换行。使用这种方式创建多行字符串，如果第二行有空白字符串的话，那么这些空白字符串都是字符串本身的一部分。比如：

var myMultiString = `This will be
on two lines`;
var myMultiString2 = `This will be
           on two lines`;

console.log(myMultiString);
console.log(myMultiString.length);
console.log(myMultiString2)
console.log(myMultiString2.length);

使用表达式进行操作的能力使用模板字符串成为一种非常漂亮的模板语言，用于构建我们后成所要讲的HTML占位符是非常有用。但是连接呢？让我们看看如何动态地将值添加到新的模板文件中。

表达式

在新的模板字符串中有了表达式的功能，它们看起来像这样：${expression}。比如像下面这样的代码：

let name = `Ryan`;
console.log(`Hi my name is ${name}`);

${}允许我们在大括号中添加一个表达式，它将产生一个值。在我们的示例中，它只包含了一个字符串变量name。这里有一些需要注意的地方：如果你想添加一个值，像上面的代码一样，那么你不需要在模板字符串中使用name变量。你可以直接使用这个值。

console.log(`Hi my name is ${Ryan}`);

输出的结果是相同的。这些表达式不仅可以让我们放入包含字符串的变量，也可以放置我们想要的任何表达式。

let price = 19.99;
let tax = 1.13;
let total = `The total prices is ${price * tax}`;
console.log(total);  // => The total prices is 22.588699999999996

我们也可以用于一个更为复杂的对象：

let person = {
    firstName: `Ryan`,
    lastName: `Christiani`,
    sayName() {
        return `Hi my name is ${this.firstName} ${this.lastName}`;
    }
}
console.log(person.sayName());  // => Hi my name is Ryan Christiani

这里有一个person对象，对象中有一个sayName()方法。我们可以从${}语法内访问对象的属性。

HTML模板

使用多行字符串并使用模板表达式将内容添加到我们的字符串中，这使得在我们的代码中使用HTML模板变得非常简易好用。

假设我们从一个API中得到一些数据看起来像这样：

{
    "id": 1,
    "name": "Bulbasaur",
    "base_experience": 64,
    "height": 7,
    "is_default": true,
    "order": 1,
    "weight": 69,
    ...
}

这个我们假想的pokeapi，使用这个数据结构创建一个可以显示Pokemon的HTML模板。

function createMarkup( data ) {
    return `
        <article class='pokemon'>
            <h3>${ data.name }</h3>
            <p>The Pokemon ${ data.name } has a base experience of ${ data.base_experience }, they also weigh ${ data.weight }</p>
        </article>
    `
}

不再需要使用像Handlebars或者Mustache这样的库就可以在JavaScript中创建漂亮易用的模板。

标签模板

模板字符串的另一个特性就是能够创建带标签的模板字符串（Tagged Template Literals）。创建可以像创建其他函数的方式一样创建一个函数，但是当你调用它时它看起来就和其他的函数调用不一样：

function myTaggedLiteral (strings) {
    console.log(strings)
}

myTaggedLiteral`test`;

注意，函数调用没有使用()，这里使用模板字符串来替代。作为函数的一个参数，函数返回的是一个字符串数组。我们来扩展一下这个函数的字符串，它将包含一个表达式，而且我们还在函数中包含一个新的参数。

function myTaggedLiteral(strings, value) {
    console.log(strings, value);
}
let someText = 'Neat';

myTaggedLiteral`test ${ someText }`;

当我们使用一个表达式时，我们可以从下一个参数中访问它。来看另一个示例，添加另一个表达式。

function myTaggedLiteral(strings, value, value2) {
    console.log(strings, value2);
}

let someText = 'Neat';

myTaggedLiteral`test ${someText} ${2+3}`;

这是相当强大的：它允许你获取字符串中使用的数据，并且按照你喜欢的方式操作它。

带标签的模板字符串是一种更高级的模板字符串形式。它允许你通过标签函数修改模板字符串的输出。标签函数的第一个参数是一个包含字符串面值的数组（比如下例中分别为"Hello"，"world"和""）；第二个参数，在第一个参数后的每一个参数，都是已经被处理好的替换表达式（在这里分别为"15"和"50"）。最后，标签函数返回处理好的字符串。在下面的例子中，命名这个标签并没有什么特殊的地方，这个函数的名字可以是任何你想要的。

let a = 5;
let b = 10;

function tag(strings, ...values) {
    strings.forEach(function(value,key){
        console.log(value);
    });

    values.forEach(function(value, key){
        console.log(value);
    });

    return 'Bazinga!';
}

tag`Hello ${ a + b } world ${ a * b }`;

正如下面的示例所示，标签函数并不一定需要返回一个字符串。

function template(strings, ...keys) {
    return (function(...values){
        let dict = values[values.length - 1] || {};
        let result = [strings[0]];

        keys.forEach(function(key, i){
            let value = Number.isInteger(key) ? values[key] : dict[key];

            result.push(value, strings[i + 1]);
        });
        return result.join('');
    })
}
let t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A'); // => "YAY!"

let t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'}); // => "Hello World!"

标签模板的一个重要应用就是过滤HTML字符串，防止用户输入恶意内容。比如下面的这个示例：

function saferHTML(template) {
    let str = template[0];
    for (let i = 0; i < arguments.length; i++) {
        let arg = String(arguments[i]);
        str += arg.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g,'&gt;');

        str += template[i]
    }
    return str;
}

let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = saferHTML`<p>${sender} has sent you a message.</p>`;

console.log(message);

模板字符串让我们写模板变得更易也更简洁，但模板字符串本身并不能取代模板引擎，因为没有条件判断和循环处理功能，但是通过标签函数，可以自己添加这些功能。

可重用模板

让我们来看看模板字符串的一个简单的用例。如果你还记得上面的内容，我们看到了模板字符串的工作原理，那就是做模板！让我们更进一步，创建一个允许我们可重用的模板函数。这里的想法是，我们可以创建初始模板，然后将数据传递给它稍后使用。

const student = {
    name: 'W3cplus',
    blogUrl: '//www.w3cplus.com'
}

const templater = function(strings, ...keys) {
    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        });
        return temp.join('');
    }
}

const studentTemplate = templater`<article>
    <h3>${'name'} is a student at HackerYou</h3>
    <p>You can find their work at ${'blogUrl'}.</p>
</article>`;

const myTemplate = studentTemplate(student);

console.log(myTemplate);

来看看我们如何实现我们的templater函数。

const templater = function(strings, ...keys) {

}

你会注意到的第一件事是...keys参数。...语法就是所谓的Rest参数；它将收集函数的任何参数并为我们创建一个数组。

接下来我们要做的是返回一个函数，它将访问我们的对象。函数允许我们回调和传递学生的数据，比如：studentTemplate(student)。

const templater = function(strings, ...keys) {
    return function(data) {

    } 
}

有了这些数据，我们需要进行一些操作。这个过程如下。首先，我们需要创建一个strings的副本。我们制作一份副本以备日后参考原件之用。然后，需要遍历数组的keys，从匹配的对象中获取数据（注意，在这个示例中，我们在${}中传递字符串），并将其放置在需要的数组中。最后，我们需要将它作为字符串重新组合在一起，并从函数中返回它。

function templater(strings, ...keys) {
    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        });
        return temp.join('');
    }
};

你可能也注意到了，这不是一个非常详细的例子。我没有办法嵌套数据或数组的值，它只是字符串而已。但我希望这个示例可以帮助你如何使用标签模板字符串以及它可以做些什么。

模板字符串中的标签函数

模板字符串除了标签模板字符串特性之外还有标签函数。

返回标签函数的函数

如果通过模板字符串调用的值是返回标签函数的函数，则可以使用前函数参数来参数人后一个函数。

例如下面的示例，repeat(x)返回一个标签函数，它重复其模板字符串x次：

function cook(strings, ...subStrings) {
    return subStrings.reduce(
        (prev, cur, i) => prev + cur + strings[i + 1], strings[0]
    );
}
function repeat(times) {
    return function(...args) {
        return cook(...args).repeat(times);
    }
}
repeat(3)`abc`; // => "abcabcabc"
repeat(3)`abc${3+1}`; // => "abc4abc4abc4"

标签函数返回标签函数

你甚至可以创建返回标签函数的标签函数，这样你就可以将模板字符串连接在一起。例如这是一个three标签函数，它可以让你三次连接模板字符串。

const three = (...args1) => (...args2) => (...args3) =>
    cook(args1) + cook(args2) + cook(args3);

three`hello``world``!`;  // => "helloworld!"

下面的concat标签函数允许你创建任意长度的连接，但是你必须通过一个空的参数列表来表示连接的末端：

function concat(...args) {
    return concatRec('', ...args);
    function concatRec(accumulated, ...args) {
        if (args.length === 0) {
            return accumulated;
        } else {
            return concatRec.bind(undefined, accumulated + cook(...args));
        }
    }
}
concat`this``is``a``test``!`(); // => "thisisatest!"

这样是可以正常运行的，那是因为模板字符串总是提供至少一个参数：

((...args) => args)``; // => [ [ '' ] ]

来看一个styled-components中的示例。

@Glen Maddern和@Max Stoiber设计的styled-components提供了组件时代的原子视觉(Visual Primitives)。在React和React Native中可能通过在标签函数模板字符串中访问CSS样式。比如下面的示例：

import styled from 'styled-components';
import { Link } from 'react-router';

const StyledLink = styled(Link)`
    color: palevioletred;
    display: block;
    margin: 0.5em 0;
    font-family: Helvetica, Arial, sans-serif;

    &:hover {
        text-decoration: underline;
    }
`;

原始字符串

在标签函数的第一个参数中，存在一个特殊的属性raw，我们可以通过它来访问模板字符串的原始字符串。

function tag(strings, ...values){
    console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`; // => string text line 1 \n string text line 2

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

let msg1 = `Multiline \n string`;
let msg2 = String.raw`Multiline \n string`;

console.log(msg1);
console.log(msg2);

如果原字符串的斜杠已经转义，那么String.raw不会做任何处理:

String.raw`Hi\\n`;  // => "Hi\\n"

String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组:

String.raw({ raw: 'test' }, 0, 1, 2); // => 't0e1s2t'

// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

总结

这篇文章了解了ES6中的模板字符串，通过一些简单的示例学习了ES6中的模板字符串的功能，以及如何使用模板字符串。

参考资料

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/template-literals.htmlDiamond Supply PUMA Black Friday

返回顶部