ES6入門筆記（二）

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

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

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

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

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

repeat方法返回一個新字符串，表示將原字符串重復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}?`

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

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}.`);
  }
}

大括號內部可以放入任意的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

模板字符串之中還能調用函數。

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

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

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

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

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

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

`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對函數的擴展

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

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

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

指定了默認值以后，函數的length屬性，將返回沒有指定默認值的參數個數。也就是說，指定了默認值后，length屬性將失真。

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

箭頭函數

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

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

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

如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。

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

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

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

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

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

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

箭頭函數可以與變量解構結合使用。

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

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

箭頭函數使得表達更加簡潔。

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79283.html

react入門學習筆記（一）

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

leon 2019-08-20 18:01 評論0 收藏0
ES6入門筆記（一）

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

warkiz 2019-08-19 18:11 評論0 收藏0
ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門）

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

mayaohua 2019-08-20 18:19 評論0 收藏0
es6入門筆記

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

renweihub 2019-08-20 17:22 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

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

princekin 2019-08-20 11:28 評論0 收藏0