ES6入門筆記（二）

godlong_X 發(fā)布于2019-08-19 18:11 / 1800人閱讀

摘要：入門筆記二對(duì)字符串操作的擴(kuò)展傳統(tǒng)上，只有方法，可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中。返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。用于頭部補(bǔ)全，用于尾部補(bǔ)全。模板字符串中嵌入變量，需要將變量名寫在之中。

ES6入門筆記（二） ES6對(duì)字符串操作的擴(kuò)展

傳統(tǒng)上，JavaScript只有indexOf方法，可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中。ES6又提供了三種新方法。

includes()：返回布爾值，表示是否找到了參數(shù)字符串。
startsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。
endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部。

repeat方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次。

ES7推出了字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串不夠指定長(zhǎng)度，會(huì)在頭部或尾部補(bǔ)全。padStart用于頭部補(bǔ)全，padEnd用于尾部補(bǔ)全。

傳統(tǒng)的JavaScript語(yǔ)言，輸出模板通常是這樣寫的。

$("#result").append(
  "There are " + basket.count + " " +
  "items in your basket, " +
  "" + basket.onSale +
  " are on sale!"
);

上面這種寫法相當(dāng)繁瑣不方便，ES6引入了模板字符串解決這個(gè)問題。

$("#result").append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串
`In JavaScript "
" is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

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

// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代碼中的字符串，都是用反引號(hào)表示。如果在模板字符串中需要使用反引號(hào)，則前面要用反斜杠轉(zhuǎn)義。

var greeting = ``Yo` World!`;

如果使用模板字符串表示多行字符串，所有的空格和縮進(jìn)都會(huì)被保留在輸出之中。

$("#warning").html(`
  Watch out!
  Unauthorized hockeying can result in penalties
  of up to ${maxPenalty} minutes.
`);

模板字符串中嵌入變量，需要將變量名寫在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 傳統(tǒng)寫法為
      // "User "
      // + user.name
      // + " is not authorized to do "
      // + action
      // + "."
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

大括號(hào)內(nèi)部可以放入任意的JavaScript表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性。

var x = 1;
var y = 2;

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

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

模板字符串之中還能調(diào)用函數(shù)。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括號(hào)中的值不是字符串，將按照一般的規(guī)則轉(zhuǎn)為字符串。比如，大括號(hào)中是一個(gè)對(duì)象，將默認(rèn)調(diào)用對(duì)象的toString方法。

如果模板字符串中的變量沒有聲明，將報(bào)錯(cuò)。

// 變量place沒有聲明
var msg = `Hello, ${place}`;
// 報(bào)錯(cuò)

由于模板字符串的大括號(hào)內(nèi)部，就是執(zhí)行JavaScript代碼，因此如果大括號(hào)內(nèi)部是一個(gè)字符串，將會(huì)原樣輸出。

`Hello ${"World"}`
// "Hello World"

如果需要引用模板字符串本身，可以像下面這樣寫。

// 寫法一
let str = "return " + "`Hello ${name}!`";
let func = new Function("name", str);
func("Jack") // "Hello Jack!"

// 寫法二
let str = "(name) => `Hello ${name}!`";
let func = eval.call(null, str);
func("Jack") // "Hello Jack!"

ES6對(duì)函數(shù)的擴(kuò)展

ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義的后面。

function log(x, y = "World") {
  console.log(x, y);
}

log("Hello") // Hello World
log("Hello", "China") // Hello China
log("Hello", "") // Hello

指定了默認(rèn)值以后，函數(shù)的length屬性，將返回沒有指定默認(rèn)值的參數(shù)個(gè)數(shù)。也就是說(shuō)，指定了默認(rèn)值后，length屬性將失真。

(function(a){}).length // 1
(function(a = 5){}).length // 0
(function(a, b, c = 5){}).length // 2

箭頭函數(shù)

ES6允許使用“箭頭”（=>）定義函數(shù)。

var f = v => v;
上面的箭頭函數(shù)等同于：

var f = function(v) {
  return v;
};

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號(hào)代表參數(shù)部分。

var f = () => 5;
// 等同于
var f = function (){ return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭頭函數(shù)的代碼塊部分多于一條語(yǔ)句，就要使用大括號(hào)將它們括起來(lái)，并且使用return語(yǔ)句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括號(hào)被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)。

var getTempItem = id => ({ id: id, name: "Temp" });

箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。

const full = ({ first, last }) => first + " " + last;

// 等同于
function full( person ){
  return person.first + " " + person.last;
}

箭頭函數(shù)使得表達(dá)更加簡(jiǎn)潔。

云服務(wù)器 GPU云服務(wù)器 ES6入門 java開發(fā)入門筆記 ES6 es6-系列

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

godlong_X

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

anaconda怎么安裝tensorflow

閱讀 1173·2023-04-25 17:28
【Python爬蟲】騰訊視頻m3u8格式分析爬?。ǜ皆创a，高清無(wú)水?。?/a>

閱讀 3639·2021-10-14 09:43

Vultr優(yōu)惠活動(dòng)整理，最新活動(dòng)充100美元送100美元，有效期一年

閱讀 3982·2021-10-09 10:02
CSS總結(jié)

閱讀 1953·2019-08-30 14:04
CSS語(yǔ)法總結(jié)

閱讀 3147·2019-08-30 13:09
深入 css z-index 屬性

閱讀 3283·2019-08-30 12:53
前端實(shí)現(xiàn)文字跑馬燈的三種方式

閱讀 2923·2019-08-29 17:11
JavaScript線程機(jī)制與事件機(jī)制

閱讀 1836·2019-08-29 16:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6入門筆記（二）

Watch out!

相關(guān)文章

react入門學(xué)習(xí)筆記（一）

ES6入門筆記（一）

ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門）