ES6語法之字符串的擴展

孫淑建發(fā)布于2019-08-21 18:32 / 2944人閱讀

摘要：模板字符串連接符在之前，將字符串連接到一起的舊方法是使用字符串連接運算符。這樣更容易構(gòu)建字符串。返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。它針對前個字符，而其他兩個方法針對從第個位置直到字符串結(jié)束。

模板字符串 + 連接符

在 ES6 之前，將字符串連接到一起的舊方法是使用字符串連接運算符 (+)。

const student = {
  name: "Richard Kalehoff",
  guardian: "Mr. Kalehoff"
};

const teacher = {
  name: "Mrs. Wilson",
  room: "N231"
}

let message = student.name + " please see " + teacher.name + " in " + teacher.room + " to pick up your report card.";
//Returns:Richard Kalehoff please see Mrs. Wilson in N231 to pick up your report card.

上述代碼能正常運行，但是當你需要連接多行字符串時，就變得更復雜。

let note = teacher.name + ",

" +
  "Please excuse " + student.name + ".
" +
  "He is recovering from the flu.

" +
  "Thank you,
" +
  student.guardian;

但是，在引入模板字面量（之前在 ES6 的開發(fā)版本中稱為“模板字符串”）之后，這一切有了改變。

注意: 作為字符串連接運算符 ( + ) 的替代方法，你可以使用字符串的 concat() 方法。但是這兩種方式都比較笨拙，無法模擬真正的字符串插值。

模板字面量

模板字面量本質(zhì)上是包含嵌入式表達式的字符串字面量。

模板字面量用反引號表示，可以包含用 ${expression} 表示的占位符。這樣更容易構(gòu)建字符串。

下面是之前的示例使用模板字面量表示后的效果：

let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;

通過使用模板字面量，你不用再使用引號和字符串連接運算符。此外，你可以在表達式內(nèi)引用對象的屬性。

...那之前的多行示例該怎么辦呢？

let note = `${teacher.name},
 
  Please excuse ${student.name}.
  He is recovering from the flu.
  
  Thank you
  ${student.guardian}`;

這是模板字面量的真正強大之處。在上述代碼中，去掉了引號和字符串連接運算符，以及換行符 ( )。這是因為模板字面量也將換行符當做字符串的一部分！

提示：模板字面量中的嵌入式表達式不僅僅可以用來引用變量。你可以在嵌入式表達式中進行運算、調(diào)用函數(shù)和使用循環(huán)！

includes(), startsWith(), endsWith()

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

includes()：返回布爾值，表示是否找到了參數(shù)字符串。

startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。

endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。

let s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

這三個方法都支持第二個參數(shù)，表示開始搜索的位置。

let s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

上面代碼表示，使用第二個參數(shù)n時，endsWith的行為與其他兩個方法有所不同。它針對前n個字符，而其他兩個方法針對從第n個位置直到字符串結(jié)束。

GPU云服務器云服務器 es6字符串擴展 php 字符串語法 Python 之字符串 html的語法

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

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

ES6語法之對象的擴展

摘要：方法的第一個參數(shù)是目標對象，后面的參數(shù)都是源對象。這個對象的任何變化，都會反映到目標對象上面。方法將和合并成一個新對象，如果兩者有同名屬性，則的屬性值會覆蓋的屬性值。否則，對象的該屬性很可能不起作用。對象字面量簡寫法你可能寫過這樣的代碼：使用和所分配的變量名稱相同的名稱初始化對象。 let type = quartz; let color = rose; let carat = 2...

SillyMonkey 2019-08-21 18:32 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標準簡稱。結(jié)語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
ES6語法之函數(shù)的擴展

摘要：函數(shù)的擴展函數(shù)參數(shù)的默認值之前，不能直接為函數(shù)的參數(shù)指定默認值，只能采用變通的方法。箭頭函數(shù)引入了一種新的函數(shù)，叫做箭頭函數(shù)。箭頭函數(shù)和普通函數(shù)的行為非常相似，但是在語法構(gòu)成上非常不同。意味著函數(shù)內(nèi)的的值是全局對象，不是對象。函數(shù)的擴展函數(shù)參數(shù)的默認值 ES6 之前，不能直接為函數(shù)的參數(shù)指定默認值，只能采用變通的方法。 function log(x, y) { y = y ||...

Clect 2019-08-21 18:39 評論0 收藏0
ES6 ...操作符

摘要：在語法中，操作符有兩種意義剩余語法，參數(shù)和展開語法，展開數(shù)組對象，作為函數(shù)數(shù)組對象的擴展運算符。使用和參數(shù)進行操作其余參數(shù)傳給原始函數(shù)展開語法運算則可以看作是參數(shù)的逆運算。在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數(shù)) 和 spread(展開語法，展開數(shù)組/對象)，作為函數(shù)、數(shù)組、對象的擴展運算符。從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0
工作中常用es6+特性

摘要：結(jié)合工作中使用情況，簡單對進行一些復習總結(jié)，包括常用的語法，等，以及短時間內(nèi)要上手需要重點學習的知識點不同工作環(huán)境可能有一些差別，主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下，是一個標準化組織，他們結(jié)合工作中使用情況，簡單對es6進行一些復習總結(jié)，包括常用的語法，api等，以及短時間內(nèi)要上手需要重點學習的知識點（不同工作環(huán)境可能有一些差別），...

xcold 2019-08-23 18:39 評論0 收藏0