ES2015入门系列7-模版字符串

nifhlheimr 发布于2019-08-20 17:40 / 2603人阅读

摘要：说到模版字符串我们先来看看在中，我们遇到的问题假设我们需要拼接一段字符串，常规的做法如下或者写的很难受对不对到了有了模版字符串后，事情就变得简单了。

说到 模版字符串 (Template strings or Template literals), 我们先来看看在ES5中，我们遇到的问题：

假设我们需要拼接一段html字符串，常规的做法如下:

var text = "ES5 sucks!";
var html = "
   
    " + text + "
  ";
console.log(html);

或者:

var text = "ES5 sucks!";
var html = [
  "",
    "" + text + "",
  ""
].join("");
console.log(html);

写的很难受对不对？到了ES2015, 有了模版字符串后，事情就变得简单了。

模版字符串，就是用 ` 和 ` 包裹起来的字符串, 如:

let html = `
  
    ES5 sucks!
  
`;
console.log(html);

在其中，我们还可以使用 ${变量名}, 直接引用变量，而不用字符串拼接了，如：

let text = "ES5 sucks!";
let html = `
  
    ${text}
  
`;
console.log(html);

如果不想其中的字符被转译，比如保留换行字符等，可以使用 String.raw, 如:

console.log(`我是
两行`);
console.log(String.raw`我是
一行`);

输出:

> 我是
> 两行
> 我是
一行

私有云 idc机房托管 es6-系列入门系列课程深度学习入门系列课程 spark入门实战系列

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

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

带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0
[译] ES6 学习笔记：关于 ES2015 特性的详细概述

摘要：将转换成常见的使用实现的基于迭代器的迭代。处停止迭代器基于鸭子模型接口这里使用语法仅仅为了说明问题使用支持为了使用迭代器属性需要引入。生成器是迭代器的子类，包含了附加的与。原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，请把star献给他，你可以在此尝试这些特性REPL。概述 ECMAScr...

leoperfect 2019-08-20 10:24 评论0 收藏0
ES6，你不得不学！

摘要：但是，的本质仍然是函数，是构造函数的另外一种写法。报错原生构造函数的继承对于一些原生的构造函数，比如，，，等，在是无法通过方法实现原生函数的内部属性，原生函数内部的无法绑定，内部属性获得不了。在没有学习 ES6 之前，学习 React，真的是一件非常痛苦的事情。即使之前你对 ES5 有着很好的基础，包括闭包、函数、原型链和继承，但是 React 中已经普遍使用 ES6 的语法，包括 ...

CKJOKER 2019-08-21 11:16 评论0 收藏0
ES2015入门系列6-Rest和Spread

摘要：就是的逆操作，看代码计算一个数组大于三个元素中前三个元素的和以及所有元素的和。前三个值为总和为结果前三个值为总和为前三个值为总和为 ES2015为我们带来了一个新的操作符: ..., 用于定义函数参数的地方，称之为 Rest 用于调用函数的地方，称之为 Spread 我们一个个来分析： Rest 写程序的时候或多或少都会有，传入不定参数给一个函数的需求，如，给一个班级加入学生名单，...

keelii 2019-08-20 17:40 评论0 收藏0
ES2015入门系列1-初识ES2015

EcmaScript 其实是一种语言规范，常见的 JavaScript, ActionScript 等都是其具体实现，平时使用中一般可以将其和Javascript对等称呼，本系列教程主要讲述 EcmaScript2015(ES6) 为JavaScript带来的新的特性，并初步掌握如何利用其进行开发。本系列面向有一定基础知识的ES5使用者，不适合初学者。先来看两段代码： Human.js exp...

hellowoody 2019-08-20 17:37 评论0 收藏0