模板字符串(Template String)

changfeng1050 发布于2019-08-20 18:12 / 901人阅读

摘要：如果使用模板字符串表示多行字符串，则所有的空格缩进和换行都会被保留在输出中。模板字符串中嵌入变量，要将变量名写在之中。变量没有声明模板字符串之间还可以进行嵌套。上面代码中，模板字符串前面有一个标识名，它是一个函数。

语法

模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

用法

// 普通字符串
`In JavaScript "
" is a line-feed.`

// 多行字符串
`In JavaScript this is
not legal.`

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

上面代码中，模板字符串都是用反引号表示，如果在模板字符串中需要使用反引号，则前面需要用反斜杠转义。

var greeting = ``Yo` World!`; // `Yo` World!

如果使用模板字符串表示多行字符串，则所有的空格、缩进和换行都会被保留在输出中。

$("#list").html(`

  first
  second

`);

上面代码中，所有模板字符串的空格和换行都是被保留的，比如

$("#list").html(`

  first
  second

`.trim());

模板字符串中嵌入变量，要将变量名写在${}之中。大括号内可以放入任意的JavaScript表达式，可以进行运算，以及引入对象属性。

var x = 1, y = 2;

`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还可以调用函数。

function func() {
    return "Hello";
}

`${func()} World`;
// "Hello World"

如果大括号中的值不是字符串，则将按照一般的规则转换为字符串。如，若大括号中是一个对象，则将默认调用对象的toString方法，把对象转换为字符串。

如果模板字符串中的变量没有声明，则会报错。

// 变量place没有声明
var msg = `Hello, ${place}`;
// ReferenceError: place is not defined

模板字符串之间还可以进行嵌套。

var tmpl = addrs => `
    
    ${addrs.map(addr => `
        
    `).join("")}
    ${addr.first}
        ${addr.last}
`;

tmpl([{first:"a", last: "b"}]);

// output:
/*"
    

        a
        b

    
"*/

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一
var str = "return " + "`Hello ${name}!`";
var func = new Function("name", str);
func("Amy");    // "Hello Amy!"

// 写法二
var str = "(name) => `Hello ${name}!`";
var func = eval.call(null, str);
func("Amy");    // "Hello Amy!"

标签模板

模板字符串的功能，不仅是上面那些，它还可以紧跟在一个函数后面，该函数将被调用来处理这个模板字符串，这种称为“标签模板”功能(Tagged template)。

标签模板函数第一个参数是字符串模板的常量数组，后面的每一个参数为表达式的计算结果，函数名称可以任意指定。下面是一个例子：

var a = 5, b = 10;

function tag(strings, ...values) {
    console.log(strings[0]);    // "Hello "
    console.log(strings[1]);    // " world"
    console.log(strings[2]);    // ""
    console.log(values[0]);     // 15
    console.log(values[1]);     // 50

    return "Anything";
}

tag`Hello ${a + b} world ${a * b}`;
// Anything
alert`123`
// 等同于
alert(123)

标签模板其它是一种特殊的函数调用形式，“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

var a = 1,
    b = 2;

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

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。

云服务器 GPU云服务器字符串String template wpf?style?template art_template

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84195.html

go html/template 模板的使用实例

摘要：从模板文件构建首页新闻手动的指定每一个模板文件，在一些场景下难免难以满足需求，我们可以使用通配符正则匹配载入。从字符串载入模板我们可以定义模板字符串，然后载入并解析渲染： template.New(tplName string).Parse(tpl string) // 从字符串模板构建 tplStr := ` {{ .Name }} {{ .Age }} ` // if ...

SegmentFault 2019-08-02 15:09 评论0 收藏0
Mustache.js源码分析

摘要：是一个弱逻辑的模板引擎，语法十分简单，使用很方便。源码只有行，且代码结构清晰。解析器解析器是整个源码中最重要的方法，用于解析模板，将标签与模板标签分离。同时比较后还需将的最后一个删除，才能进行下一轮比较。 mustache.js是一个弱逻辑的模板引擎，语法十分简单，使用很方便。源码（v2.2.1）只有600+行，且代码结构清晰。一般来说，mustache.js使用方法如下： var ...

mating 2019-08-26 13:29 评论0 收藏0
web.py源码分析: 模板(3)

摘要：前两篇文章主要说明了的模板系统将模板文件处理后得到的结果函数。生成函数的代码这个是模板生成过程中最长最复杂的一段，会应用到的分析功能以及动态编译功能。参数都是一个，表示还未解析的模板内容。前两篇文章主要说明了web.py的模板系统将模板文件处理后得到的结果：__template__()函数。本文主要讲述模板文件是如何变成__template__()函数的。 Render和frende...

OnlyMyRailgun 2019-07-24 17:56 评论0 收藏0
（黑马）C++提高编程笔记（未完）

摘要：文章目录模板模板的概念函数模板函数模板语法函数模板注意事项函数模板案例普通函数与函数模板的区别普通函数与函数模板的调用规则模板的局限性类模板类模板语法类模板与函数模板区别类模板中成员函数创建时机类模板对象做函数参数类模 ...

Jenny_Tong 2021-10-13 09:40 评论0 收藏0
如何实现一个基于 DOM 的模板引擎

摘要：我们提取变量的目的就是为了在函数中生成相应的变量赋值的字符串便于在函数中使用，例如这样的话，只需要在调用这个匿名函数的时候传入对应的即可获得我们想要的结果了。 showImg(https://segmentfault.com/img/bVSspq?w=4000&h=2670); 题图：Vincent Guth 注：本文所有代码均可在本人的个人项目colon中找到，本文也同步到了知乎专栏...

maxmin 2019-08-20 18:36 评论0 收藏0