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

nifhlheimr 發布于2019-08-20 17:40 / 2771人閱讀

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

說到 模版字符串 (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`我是
一行`);

輸出:

> 我是
> 兩行
> 我是
一行

GPU云服務器云服務器 es6-系列入門系列課程深度學習入門系列課程 spark入門實戰系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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