亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

ES6入門筆記（二）

godlong_X / 1845人閱讀

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

ES6入門筆記（二） ES6對字符串操作的擴展

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

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

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

ES7推出了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart用于頭部補全，padEnd用于尾部補全。

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

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

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

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

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串
`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}?`

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

var greeting = ``Yo` World!`;

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

$("#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}.`);
  }
}

大括號內(nèi)部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性。

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

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

如果模板字符串中的變量沒有聲明，將報錯。

// 變量place沒有聲明
var msg = `Hello, ${place}`;
// 報錯

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

`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對函數(shù)的擴展

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

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

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

指定了默認值以后，函數(shù)的length屬性，將返回沒有指定默認值的參數(shù)個數(shù)。也就是說，指定了默認值后，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ù)或需要多個參數(shù)，就使用一個圓括號代表參數(shù)部分。

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

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

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

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

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

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ù)使得表達更加簡潔。

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

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

相關(guān)文章

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

    摘要：選擇的主要原因大概是因為該框架出現(xiàn)較早，感覺上會相對成熟，日后學(xué)習中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學(xué)習，我按照我學(xué)習中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發(fā)。 這兩天得空，特意來折騰了以下時下火熱的前端框架react，至于為什么選react,作為一個初學(xué)者react和vue在技術(shù)上的優(yōu)劣我無權(quán)評論，也就不妄加評論了...

    leon 評論0 收藏0

  • ES6入門筆記（一）

    摘要：用聲明的常量無法在后面的代碼中改值。表達式里還有一個很方便的就是表達式，舉個例子運行結(jié)果為后聲明的里以數(shù)組的形式存放了函數(shù)的剩余參數(shù)，是不是很方便。 ES6入門筆記（一） 安裝babel 由于瀏覽器對ES6的支持還不是很好，編寫ES6代碼前我們要安裝一個babel工具將ES6代碼編譯成ES5代碼，用如下命令安裝babel： npm install -g babel-core ...

    warkiz 評論0 收藏0

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

    摘要：也就是說，遍歷器對象本質(zhì)上，就是一個指針對象。執(zhí)行這個函數(shù)，就會返回一個遍歷器。一個對象如果要有可被循環(huán)調(diào)用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。后面跟的是一個可遍歷的結(jié)構(gòu)，它會調(diào)用該結(jié)構(gòu)的遍歷器接口。 ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門） Iterator的遍歷過程 創(chuàng)建一個指針對象，指向當前數(shù)據(jù)結(jié)構(gòu)的起始位...

    mayaohua 評論0 收藏0

  • es6入門筆記

    摘要：批量聲明循環(huán)箭頭函數(shù)中可以省略，如果括號里只有返回的表達式，那么花括號和關(guān)鍵字也可以省略。箭頭函數(shù)指向?qū)嵗闹赶蚴窃摵瘮?shù)被調(diào)用的指向該函數(shù)是被哪個對象所調(diào)用時的就是箭頭函數(shù)中的指向是定義時的指向?qū)嵗闹赶? 常量const const a = 1; a +=2; console.log(a); //報錯 VM6833:2 Uncaught TypeError: Assignment t...

    renweihub 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習資源做一個匯總，方便自己學(xué)習查閱參考，和好友們共同進步。 特意對前端學(xué)習資源做一個匯總，方便自己學(xué)習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

發(fā)表評論

0條評論

godlong_X

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<