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

nifhlheimr 發(fā)布于2019-08-20 17:40 / 2779人閱讀

摘要：說到模版字符串我們先來看看在中，我們遇到的問題假設(shè)我們需要拼接一段字符串，常規(guī)的做法如下或者寫的很難受對不對到了有了模版字符串后，事情就變得簡單了。

說到 模版字符串 (Template strings or Template literals), 我們先來看看在ES5中，我們遇到的問題：

假設(shè)我們需要拼接一段html字符串，常規(guī)的做法如下:

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);

如果不想其中的字符被轉(zhuǎn)譯，比如保留換行字符等，可以使用 String.raw, 如:

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

輸出:

> 我是
> 兩行
> 我是
一行

云服務(wù)器 GPU云服務(wù)器 es6-系列入門系列課程深度學(xué)習(xí)入門系列課程 spark入門實(shí)戰(zhàn)系列

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83762.html

相關(guān)文章

帶你入門 JavaScript ES6 (一)

摘要：是國際組織于年月日發(fā)布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實(shí)現(xiàn)字符串拼接操作。本文同步帶你入門 JavaScript ES6 (一)，轉(zhuǎn)載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發(fā)布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 評論0 收藏0
[譯] ES6 學(xué)習(xí)筆記：關(guān)于 ES2015 特性的詳細(xì)概述

摘要：將轉(zhuǎn)換成常見的使用實(shí)現(xiàn)的基于迭代器的迭代。處停止迭代器基于鴨子模型接口這里使用語法僅僅為了說明問題使用支持為了使用迭代器屬性需要引入。生成器是迭代器的子類，包含了附加的與。原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，請把star獻(xiàn)給他，你可以在此嘗試這些特性REPL。概述 ECMAScr...

leoperfect 2019-08-20 10:24 評論0 收藏0
ES6，你不得不學(xué)！

摘要：但是，的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。報(bào)錯原生構(gòu)造函數(shù)的繼承對于一些原生的構(gòu)造函數(shù)，比如，，，等，在是無法通過方法實(shí)現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的無法綁定，內(nèi)部屬性獲得不了。在沒有學(xué)習(xí) ES6 之前，學(xué)習(xí) React，真的是一件非常痛苦的事情。即使之前你對 ES5 有著很好的基礎(chǔ)，包括閉包、函數(shù)、原型鏈和繼承，但是 React 中已經(jīng)普遍使用 ES6 的語法，包括 ...

CKJOKER 2019-08-21 11:16 評論0 收藏0
ES2015入門系列6-Rest和Spread

摘要：就是的逆操作，看代碼計(jì)算一個數(shù)組大于三個元素中前三個元素的和以及所有元素的和。前三個值為總和為結(jié)果前三個值為總和為前三個值為總和為 ES2015為我們帶來了一個新的操作符: ..., 用于定義函數(shù)參數(shù)的地方，稱之為 Rest 用于調(diào)用函數(shù)的地方，稱之為 Spread 我們一個個來分析： Rest 寫程序的時候或多或少都會有，傳入不定參數(shù)給一個函數(shù)的需求，如，給一個班級加入學(xué)生名單，...

keelii 2019-08-20 17:40 評論0 收藏0
ES2015入門系列1-初識ES2015

EcmaScript 其實(shí)是一種語言規(guī)范，常見的 JavaScript, ActionScript 等都是其具體實(shí)現(xiàn)，平時使用中一般可以將其和Javascript對等稱呼，本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性，并初步掌握如何利用其進(jìn)行開發(fā)。本系列面向有一定基礎(chǔ)知識的ES5使用者，不適合初學(xué)者。先來看兩段代碼： Human.js exp...

hellowoody 2019-08-20 17:37 評論0 收藏0