当前位置: 首页 > 编程笔记 >

浅谈ES6 模板字符串的具体使用方法

康元凯
2023-03-14
本文向大家介绍浅谈ES6 模板字符串的具体使用方法,包括了浅谈ES6 模板字符串的具体使用方法的使用技巧和注意事项,需要的朋友参考一下

写在前面

关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心。在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 。

关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习。欢迎大家积极纠错,留言探讨。

模板字符串(template strings)

用法

// 普通字符串
`In JavaScript '\n' 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?

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲,就是增加了变量功能的字符串。

先来看一下以前我们对字符串的使用:

/**
 * Before ES6 字符串拼接
 */
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名:' + name + '\n'+
      '简介:'+ desc;
  return tpl;
}

而现在:

var html = `公司名:${name}
  简介:${desc}`;

很简洁吧。

引一段 MDN 对于模板字符串的定义:

模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。

而占位符${},可以是任意的 js 表达式(函数或者运算),甚至是另一个模板字符串,会将其计算的结果作为字符串输出。如果模板中需要使用$,{等字符串,则需要进行转义。

看个例子就明白了。

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

不同于普通字符串,模板字符串还可以多行书写,模板字符串中所有的空格,新行,缩进都会原样的输出在生成的字符串中。

而单纯的模板字符串还存在着很多的局限性。如:

  1. 不能自动转义特殊的字符串。(这样很容易引起注入攻击)
  2. 不能很好的和国际化库配合(即不会格式化特定语言的数字,日期,文字等)
  3. 没有内建循环语法,(甚至连条件语句都不支持, 只可以使用模板套构的方法)

标签模板(tagged template)

为此,引出了标签模板的概念。标签模板则是在反引号前面引入一个标签(tag)。该标签是一个函数,用于处于定制化模板字符串后返回值。就拿上面对特殊字符串举例

/**
 * HTML 标签转义
 * @param {Array.<DOMString>} templateData 字符串类型的tokens
 * @param {...} ..vals 表达式占位符的运算结果tokens
 * 
 */
function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i < arguments.length; i++) {
  var arg = String(arguments[i]);
  // Escape special characters in the substitution.
  s += arg.replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

标签函数会接收多个参数

  1. 第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组
  2. 后面的参数是已经替换后的变量值

改一下例子1

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
tag`公司名:${name}简介:${desc}`

tag 的参数则分别为 ['公司名:','简介:'], '丁香医生', '丁香医生是面向大众的科普性健康类网站'。

有了此类方法,就大大的增加了控制的权利。如上面说的国际化库甚至循环语句。

浏览器兼容性

  1. 服务器端, io.js 支持
  2. 浏览器端, FF34+ , chrome 41+
  3. 移动端 IOS 8, Android 4.4
  4. IE Tech Preview

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍ES6之模版字符串的具体使用,包括了ES6之模版字符串的具体使用的使用技巧和注意事项,需要的朋友参考一下 最近在项目中使用了ES6的模版字符串,在这里加以总结。 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: 但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。 于是ES6中提供了模版

  • 本文向大家介绍深入浅出es6模板字符串,包括了深入浅出es6模板字符串的使用技巧和注意事项,需要的朋友参考一下 本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下 作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面。举个栗子 有时候还要给标签加一些属性,写起来很不方便,es6提供了模板字符串的方法,简化了这一过程 所有模板字符串的空格和换行,都是被保留的,如果你不想要前后换

  • ES6引入了一种通过反引号( ` )标记的新的字符串文字类型。 这些字符串文字可以包括换行符,并且有一个新的机制用于将变量插入字符串:

  • 本文向大家介绍浅谈python字符串方法的简单使用,包括了浅谈python字符串方法的简单使用的使用技巧和注意事项,需要的朋友参考一下 学习python字符串方法的使用,对书中列举的每种方法都做一个试用,将结果记录,方便以后查询。 (1) s.capitalize() ;功能:返回字符串的的副本,并将首字母大写。使用如下: (2)s.center(width,char); 功能:返回将s字符串放在

  • 链接: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals 问题:< br >使用带反斜杠的模板文字语法创建列表元素(li)字符串数组。每个列表元素的文本应该是result对象的failure属性中的数组元素之一

  • 问题内容: 我有以下Ecma-Script-6代码 输出如下: 和 我已经能够在此处将字符串串联起来,那么使用模板文字的情形将是什么? 问题答案: 如果像问题示例中那样仅将模板文字与占位符(例如)一起使用,则结果与串联字符串相同。从主观上讲,它看起来更好并且更易于阅读,尤其是对于多行字符串或包含这两者的字符串,因为您不必再​​转义那些字符了。 可读性是一个很棒的功能,但是关于模板最有趣的是Tagg