OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

JavaScrip字符串模板表达式中的反引号怎么打?


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1493689791273
注意 转载须保留原文链接,译文链接,作者译者等信息。  

模板字符串是ES6引入的可以在字符串中嵌入变量的表达式。与常用的单引号、双引导不同,字符串模板使用反引号表达式。

反引号一般在键盘的左上方,数据健前的第一个键,即按下Shift会显示 "~" 的那个鍵,不按Shift即为反引号。


模板字面量(Template literals)是允许嵌入表达式的字符串字面量。并且支持多行字符串和字符串插补特性。在 ES2015 / ES6 规范中,其被称之为模板字符串(template strings)。

语法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

描述

模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以在通过该函数对模板字符串来进行操作处理。

`\`` === "`" // --> true

多行字符串

在新行中插入的任何字符都是模板字符串中的一部分,使用普通字符串,你可以通过以下的方式获得多行字符串:

console.log("string text line 1\n\
string text line 2");
// "string text line 1
// string text line 2"

要获得同样效果的多行字符串,只需使用如下代码:

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

表达式插补

在普通字符串中嵌入表达式,必须使用如下语法:

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

现在通过模板字符串,我们可以使用一种更优雅的方式来表示:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

带标签的模板字符串

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

var a = 5;
var 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 "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"

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

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

原始字符串

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

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

tag`string text line 1 \n string text line 2`;

另外,使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"


相关文章:
Chrome支持ES6字符串模板解析
字符串(String)模板引擎被视为是有害的




原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JavaScript使用ES6的Class面向对象继承时 this is not defined 解决方法
  2. Java已快过时?斯坦福大学将JavaScript作为计算机科学入门课
  3. Docker改名Moby:急于商业化陷入品牌更名乱象
  4. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  5. TCP/UDP协议比较:在Node.JS中UDP服务器和客户端通信示例
  6. OnceVI前后端分离的数据可视化报表工具简介
  7. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法
  8. 2016 年崛起的 JS 项目
  9. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  10. 周鸿祎:一些程序员没有商业意识,却又很自负,一看就知道不会创业
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. Node.JS用Socket实现FTP Server服务器和Client客户端
  2. Node.JS更改Windows注册表regedit的几种方法
  3. Debian下设置Linux Shell脚本开机自动启动Node.JS进程
  4. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法
  5. 可视化Web报表OnceVI中用户输入表单验证与提交
  6. Web报表OnceVI如何制作条形码与打印二维码(Barcode/Qrcode)
  7. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  8. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  9. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  10. 在OnceIO(Node.JS)中用Redis储存Session

 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 40行JavaScript代码实现的3D旋转魔方动画效果
  3. 使用Javascript将相对路径地址转换为绝对路径
  4. 给checkbox选择框设置不选中时的值
  5. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  6. JavaScript中怪异的地方
  7. 在JavaScript中创建命名空间的几种写法
  8. JavaScript中的继承,构造函数以及new关键字的作用
  9. 纽约时报使用Html5 WebRTC记录访问者IP地址
  10. 正则中test、exec、match的简单区别,以及括号的用法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号