ES6學習—字符串的擴展(2018-06-23)

字符串常用方法總結(jié)

1.ES6提供一種字符串遍歷方法for···of···
for( let codePoint of 'foo') {
    console.log(codePoint)
}
2.ES5提供了charAt來查找字符串洞翩,返回字符串的位置,但這個方法有一定局限性焰望,該方法不能識別大于0xFFFF的字符骚亿。ES6提供了at方法來查找字符串,這個方法彌補了charAt的不足
'abc'.at(0) //"a"
3.ES6之前Js只有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

在上面代碼中startsWith传趾,includes第二個參數(shù)寫開始位置才正確迎膜,
endsWith查找從前面開始查找,第二個參數(shù)寫第一個參數(shù)結(jié)束位數(shù)的下一位才正確浆兰。
例如‘o’是第四位磕仅。

4.repeat()
repeat方法返回一個新字符串,表示將原字符串重復n次簸呈。
‘x’.repeat(3) //”xxx”
‘hello’.repeat(2)  //”hellohello”
‘na’.repeat(0) //””

(1)參數(shù)如果是小數(shù)會被取整

"nana".repeat(2.9) //”nana”

(2)如果repeat的參數(shù)是負數(shù)或者Infinity榕订,會報錯。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

(3)參數(shù)是0-1之間的小數(shù)蝶棋,則等同于0卸亮,這是因為會進行取整運算,0到-1小數(shù)取整以后等于-0,repeat等同于0玩裙,參數(shù)NaN等同于 0兼贸。

'na'.repeat(-0.9) // ""

'na'.repeat(NaN) // ""

(4)如果repeat的參數(shù)是字符串,則會先轉(zhuǎn)換成數(shù)字吃溅。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
5.padStart()溶诞,padEnd()

ES2017引入字符串補全長度功能。如果某個字符串不夠指定長度决侈,可以在頭部或尾部補全螺垢。padStart()用于頭部補全,padEnd()用于尾部補全赖歌。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代碼中補全都一共接受兩個參數(shù)枉圃,第一個參數(shù)用來指定字符串的最小長度,第二個參數(shù)用來補全的字符串

(1)如果原字符串長度庐冯,等于或大于指定的最小長度則返回原字符串

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

(2)如果用來補全的字符串和原字符串孽亲,兩個的長度超過了指定的最小長度,則會截去超出的補全字符串

'abc'.padStart(10, '0123456789')
// '0123456abc'

(3)如果省略第二個參數(shù)展父,那么會默認用空格來補全長度

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

(4)padStart的常見用途是為數(shù)值補全指定位數(shù)

'1'.padStart(10, '0') // "0000000001"
'123456'.padStart(10, '0') // "0000123456"
6.模板字符串

模板字符串返劲,用反引號(`)標識玲昧,改變了以往插入變量、html是繁瑣寫法篮绿。它既可以當普通字符串使用孵延,也可以定義多行字符串,或者在字符串中嵌入變量亲配。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

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

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

上面的代碼中的都是用反引號來表示模板字符串尘应。使用模板字符串表示多行字符串時它的所有結(jié)構(gòu)都會被保留,也就是說空格和縮進都會被保留吼虎。

如果在當中有需要使用反應號菩收,前面可以用反斜杠轉(zhuǎn)義。

let greeting = `\`Yo\` World!`;

上文也提過模板字符串可以插入變量鲸睛,ES6規(guī)定變量必須寫在${ }當中。

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

大括號當中可以放入任何JS表達式坡贺,可以進行運算和引用對象屬性官辈。當然也可以調(diào)用函數(shù)

let x = 1;
let y = 2;
//運算
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

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

//引用對象屬性
let 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

注意

(1)模板字符串的變量如果未經(jīng)聲明就是用會報錯

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

(2)如 果括號內(nèi)是字符串,將會原樣返回

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

(3)模板字符串可以嵌套

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遍坟,一起剝皮案震驚了整個濱河市拳亿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌愿伴,老刑警劉巖肺魁,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異隔节,居然都是意外死亡鹅经,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門怎诫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘾晃,“玉大人,你說我怎么就攤上這事幻妓”奈螅” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵肉津,是天一觀的道長强胰。 經(jīng)常有香客問我,道長妹沙,這世上最難降的妖魔是什么偶洋? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮初烘,結(jié)果婚禮上涡真,老公的妹妹穿的比我還像新娘分俯。我一直安慰自己,他們只是感情好哆料,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布缸剪。 她就那樣靜靜地躺著,像睡著了一般东亦。 火紅的嫁衣襯著肌膚如雪杏节。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天典阵,我揣著相機與錄音洞斯,去河邊找鬼。 笑死笛丙,一個胖子當著我的面吹牛产上,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播歹啼,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼玄渗,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了狸眼?” 一聲冷哼從身側(cè)響起藤树,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拓萌,沒想到半個月后岁钓,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡微王,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年屡限,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片炕倘。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡囚霸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出激才,到底是詐尸還是另有隱情拓型,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布瘸恼,位于F島的核電站劣挫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏东帅。R本人自食惡果不足惜压固,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望靠闭。 院中可真熱鬧帐我,春花似錦坎炼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至芬为,卻和暖如春萄金,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背媚朦。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工氧敢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人询张。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓孙乖,卻偏偏與公主長得像,于是被迫代替她去往敵國和親份氧。 傳聞我的和親對象是個殘疾皇子的圆,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容