摘要:字符串拓展在我們判斷字符串是否包含另一個(gè)字符串時(shí),之前,我們只有方法,之后我們又多了三種方法返回布爾值,表示是否找到參數(shù)字符串。返回布爾值,表示參數(shù)字符串是否在原字符串的頭部。
本文是 重溫基礎(chǔ) 系列文章的第八篇。
今日感受:人在異鄉(xiāng),也不能忘記湯圓。
系列目錄:
【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)
【重溫基礎(chǔ)】1.語(yǔ)法和數(shù)據(jù)類(lèi)型
【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤處理
【重溫基礎(chǔ)】3.循環(huán)和迭代
【重溫基礎(chǔ)】4.函數(shù)
【重溫基礎(chǔ)】5.表達(dá)式和運(yùn)算符
【重溫基礎(chǔ)】6.數(shù)字
【重溫基礎(chǔ)】7.時(shí)間對(duì)象
本章節(jié)復(fù)習(xí)的是JS中的字符串,還有字符串的相關(guān)屬性和方法。
前置知識(shí):
JavaScript中的字符串的每個(gè)元素,在字符串中都占據(jù)一個(gè)位置,第一個(gè)元素的索引值為0,往后累加,另外創(chuàng)建字符串有2個(gè)方法:
1.字面量創(chuàng)建:
let a = "hello"; // "hello" typeof a; // "string"
2.字符串對(duì)象創(chuàng)建:
let a = new String("hello"); //String?{"hello"} typeof a; // "object"
實(shí)際開(kāi)發(fā)中,除非必要,建議使用字面量創(chuàng)建,因?yàn)閮煞N創(chuàng)建方法會(huì)有差異:
let a1 = "1+1"; let a2 = new String("1+1"); eval(a1); // number 2 eval(a2); // string "1+1"
String有一個(gè)length屬性,表示字符串中字符個(gè)數(shù):
let a = "hello"; a.length; // 51.String對(duì)象方法:
String對(duì)象的方法非常多,建議大家可以到 W3school JavaScript String 對(duì)象 學(xué)習(xí)完整的內(nèi)容。
方法 | 描述 |
---|---|
charAt, charCodeAt, codePointAt | 返回字符串指定位置的字符或者字符編碼。 |
indexOf, lastIndexOf | 分別返回字符串中指定子串的位置或最后位置。 |
startsWith, endsWith, includes | 返回字符串是否以指定字符串開(kāi)始、結(jié)束或包含指定字符串。 |
concat | 連接兩個(gè)字符串并返回新的字符串。 |
fromCharCode, fromCodePoint | 從指定的Unicode值序列構(gòu)造一個(gè)字符串。這是一個(gè)String類(lèi)方法,不是實(shí)例方法。 |
split | 通過(guò)將字符串分離成一個(gè)個(gè)子串來(lái)把一個(gè)String對(duì)象分裂到一個(gè)字符串?dāng)?shù)組中。 |
slice | 從一個(gè)字符串提取片段并作為新字符串返回。 |
substring, substr | 分別通過(guò)指定起始和結(jié)束位置,起始位置和長(zhǎng)度來(lái)返回字符串的指定子集。 |
match, replace, search | 通過(guò)正則表達(dá)式來(lái)工作. |
toLowerCase, toUpperCase | 分別返回字符串的小寫(xiě)表示和大寫(xiě)表示。 |
normalize | 按照指定的一種 Unicode 正規(guī)形式將當(dāng)前字符串正規(guī)化。 |
repeat | 將字符串內(nèi)容重復(fù)指定次數(shù)后返回。 |
trim | 去掉字符串開(kāi)頭和結(jié)尾的空白字符。 |
作用:查找字符串中指定位置的內(nèi)容。
str.charAt(index) index : 查找的字符的下標(biāo)(大于等于0,若小于0則返回空字符串),若沒(méi)傳則表示1。
let a = "hello leo!" a.charAt(); // "h" a.charAt(1); // "e" a.charAt(-1);// ""1.2.indexOf和lastIndexOf
作用:查找指定字符串的位置。
indexOf和lastIndexOf相同點(diǎn):
兩者接收的參數(shù)一致,沒(méi)有查到內(nèi)容,返回-1。
indexOf和lastIndexOf不同點(diǎn):
若查找到內(nèi)容,則indexOf返回第一次出現(xiàn)的索引而lastIndexOf返回最后一次出現(xiàn)的索引。
str.indexOf(value[, fromIndex])接收2個(gè)參數(shù):
value : 需要查找的字符串內(nèi)容;
fromIndex : 可選,開(kāi)始查找的位置,默認(rèn)0;
let a = "hello leo"; let b = a.indexOf("lo"); // 3 let c = a.indexOf("lo",4);// -1 let e = a.lastIndexOf("l"); // 6
一定要注意:
當(dāng)fromIndex > a.length,則fromIndex被視為a.length。
let a = "hello leo"; let b = a.indexOf("lo",99);// -1
當(dāng)fromIndex < 0,則fromIndex被視為0。
let a = "hello leo"; let b = a.indexOf("lo",-1);// 3
indexOf和lastIndexOf區(qū)分大小寫(xiě)。
let a = "hello leo"; let b = a.indexOf("Lo"); // -11.3 concat
作用:連接字符串。
concat()接收任意個(gè)參數(shù)作為連接的字符串,返回一個(gè)合并后的新字符串。
let a = "hello"; let b = " leo "; let c = "!" a.concat(b,c); // "hello leo !"1.4 split
作用:把字符串分割為字符串?dāng)?shù)組,并可以指定分隔符。
split(separator[,limit])可以接收2個(gè)參數(shù):
separator:必需,字符串或者正則表達(dá)式,作為分割的內(nèi)容;
limit:可選,作為指定返回的數(shù)組的最大長(zhǎng)度;
若separator為"",則字符串會(huì)在每個(gè)字符之間分割;
let a = "How are you doing today?"; a.split(); // ["How are you doing today?"] a.split(""); // ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"] a.split(" "); // ["How", "are", "you", "doing", "today?"] a.split("",4); // ["H", "o", "w", " "] a.split(" ",4); // ["How", "are", "you", "doing"]
使用其他分割符號(hào):
let a = "ni,hao,a!"; a.split(","); // ["ni", "hao", "a!"]1.5 slice
作用:提取并返回字符串的片斷。
slice([start,end]) 可以接收2個(gè)參數(shù):
start:要提取的片段的起始下標(biāo),若小于零,則從字符串尾部開(kāi)始算起,如-1表示字符串最后一個(gè)字符,-2為倒數(shù)第二個(gè)字符等等。
end:要提取的片段的結(jié)束下標(biāo),若沒(méi)有傳入,則表示從start到字符串結(jié)尾,若為負(fù)數(shù)則從字符串尾部開(kāi)始算起。
let a = "How are you doing today?"; a.slice(); // "How are you doing today?" a.slice(1); // "ow are you doing today?" a.slice(-1); // "?" a.slice(1,5); // "ow a" a.slice(1,-1); // "ow are you doing today" a.slice(-2,-1); // "y"2.字符串拓展(ES6) 2.1 includes(),startsWith(),endsWith()
在我們判斷字符串是否包含另一個(gè)字符串時(shí),ES6之前,我們只有typeof方法,ES6之后我們又多了三種方法:
includes():返回布爾值,表示是否找到參數(shù)字符串。
startsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的頭部。
endsWith():返回布爾值,表示參數(shù)字符串是否在原字符串的尾部。
let a = "hello leo"; a.startsWith("leo"); // false a.endsWith("o"); // true a.includes("lo"); // true
并且這三個(gè)方法都支持第二個(gè)參數(shù),表示起始搜索的位置。
let a = "hello leo"; a.startsWith("leo",1); // false a.endsWith("o",5); // true a.includes("lo",6); // false
endsWith 是針對(duì)前 n 個(gè)字符,而其他兩個(gè)是針對(duì)從第n個(gè)位置直到結(jié)束。
2.2 repeat()repeat方法返回一個(gè)新字符串,表示將原字符串重復(fù)n次。
基礎(chǔ)用法:
"ab".repeat(3); // "ababab" "ab".repeat(0); // ""
特殊用法:
參數(shù)為小數(shù),則取整
"ab".repeat(2.3); // "abab"
參數(shù)為負(fù)數(shù)或Infinity,則報(bào)錯(cuò)
"ab".repeat(-1); // RangeError "ab".repeat(Infinity); // RangeError
參數(shù)為0到-1的小數(shù)或NaN,則取0
"ab".repeat(-0.5); // "" "ab".repeat(NaN); // ""
參數(shù)為字符串,則轉(zhuǎn)成數(shù)字
"ab".repeat("ab"); // "" "ab".repeat("3"); // "ababab"2.3 padStart(),padEnd()
用于將字符串頭部或尾部補(bǔ)全長(zhǎng)度,padStart()為頭部補(bǔ)全,padEnd()為尾部補(bǔ)全。
這兩個(gè)方法接收2個(gè)參數(shù),第一個(gè)指定字符串最小長(zhǎng)度,第二個(gè)用于補(bǔ)全的字符串。
基礎(chǔ)用法 :
"x".padStart(5, "ab"); // "ababx" "x".padEnd(5, "ab"); // "xabab"
特殊用法:
原字符串長(zhǎng)度,大于或等于指定最小長(zhǎng)度,則返回原字符串。
"xyzabc".padStart(5, "ab"); // "xyzabc"
用來(lái)補(bǔ)全的字符串長(zhǎng)度和原字符串長(zhǎng)度之和,超過(guò)指定最小長(zhǎng)度,則截去超出部分的補(bǔ)全字符串。
"ab".padStart(5,"012345"); // "012ab"
省略第二個(gè)參數(shù),則用空格補(bǔ)全。
"x".padStart(4); // " x" "x".padEnd(4); // "x "2.4 模版字符串
用于拼接字符串,ES6之前:
let a = "abc" + "def" + "ghi";
ES6之后:
let a = ` abc def ghi `
拼接變量:
在反引號(hào)(`)中使用${}包裹變量或方法。
// ES6之前 let a = "abc" + v1 + "def"; // ES6之后 let a = `abc${v1}def`3.字符串拓展(ES7)
用來(lái)為字符串填充特定字符串,并且都有兩個(gè)參數(shù):字符串目標(biāo)長(zhǎng)度和填充字段,第二個(gè)參數(shù)可選,默認(rèn)空格。
"es8".padStart(2); // "es8" "es8".padStart(5); // " es8" "es8".padStart(6, "woof"); // "wooes8" "es8".padStart(14, "wow"); // "wowwowwowwoes8" "es8".padStart(7, "0"); // "0000es8" "es8".padEnd(2); // "es8" "es8".padEnd(5); // "es8 " "es8".padEnd(6, "woof"); // "es8woo" "es8".padEnd(14, "wow"); // "es8wowwowwowwo" "es8".padEnd(7, "6"); // "es86666"
從上面結(jié)果來(lái)看,填充函數(shù)只有在字符長(zhǎng)度小于目標(biāo)長(zhǎng)度時(shí)才有效,若字符長(zhǎng)度已經(jīng)等于或小于目標(biāo)長(zhǎng)度時(shí),填充字符不會(huì)起作用,而且目標(biāo)長(zhǎng)度如果小于字符串本身長(zhǎng)度時(shí),字符串也不會(huì)做截?cái)嗵幚?,只?huì)原樣輸出。
參考資料MDN Text formatting
W3school JavaScript String 對(duì)象
本部分內(nèi)容到這結(jié)束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | https://github.com/pingan8787... |
JS小冊(cè) | js.pingan8787.com |
歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨,與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/100325.html
摘要:本文是重溫基礎(chǔ)系列文章的第十一篇。返回一個(gè)布爾值,表示該值是否為的成員。使用回調(diào)函數(shù)遍歷每個(gè)成員。與數(shù)組相同,對(duì)每個(gè)成員執(zhí)行操作,且無(wú)返回值。 本文是 重溫基礎(chǔ) 系列文章的第十一篇。 今日感受:注意身體,生病花錢(qián)又難受。 系列目錄: 【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理) 【重溫基礎(chǔ)】1.語(yǔ)法和數(shù)據(jù)類(lèi)型 【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤處理 【重溫基礎(chǔ)】3....
摘要:構(gòu)造函數(shù)通常首字母大寫(xiě),用于區(qū)分普通函數(shù)。這種關(guān)系常被稱(chēng)為原型鏈,它解釋了為何一個(gè)對(duì)象會(huì)擁有定義在其他對(duì)象中的屬性和方法。中所有的對(duì)象,都有一個(gè)屬性,指向?qū)嵗龑?duì)象的構(gòu)造函數(shù)原型由于是個(gè)非標(biāo)準(zhǔn)屬性,因此只有和兩個(gè)瀏覽器支持,標(biāo)準(zhǔn)方法是。 從這篇文章開(kāi)始,復(fù)習(xí) MDN 中級(jí)教程 的內(nèi)容了,在初級(jí)教程中,我和大家分享了一些比較簡(jiǎn)單基礎(chǔ)的知識(shí)點(diǎn),并放在我的 【Cute-JavaScript】系...
摘要:本文是重溫基礎(chǔ)系列文章的第七篇。系列目錄復(fù)習(xí)資料資料整理個(gè)人整理重溫基礎(chǔ)語(yǔ)法和數(shù)據(jù)類(lèi)型重溫基礎(chǔ)流程控制和錯(cuò)誤處理重溫基礎(chǔ)循環(huán)和迭代重溫基礎(chǔ)函數(shù)重溫基礎(chǔ)表達(dá)式和運(yùn)算符重溫基礎(chǔ)數(shù)字本章節(jié)復(fù)習(xí)的是中的時(shí)間對(duì)象,一些處理的方法。 本文是 重溫基礎(chǔ) 系列文章的第七篇。今日感受:做好自律。 系列目錄: 【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理) 【重溫基礎(chǔ)】1.語(yǔ)法和數(shù)據(jù)類(lèi)型...
摘要:系列目錄復(fù)習(xí)資料資料整理個(gè)人整理重溫基礎(chǔ)語(yǔ)法和數(shù)據(jù)類(lèi)型重溫基礎(chǔ)流程控制和錯(cuò)誤處理重溫基礎(chǔ)循環(huán)和迭代重溫基礎(chǔ)函數(shù)本章節(jié)復(fù)習(xí)的是中的表達(dá)式和運(yùn)算符,用好這些可以大大提高開(kāi)發(fā)效率。 本文是 重溫基礎(chǔ) 系列文章的第五篇。今日感受:家的意義。 系列目錄: 【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理) 【重溫基礎(chǔ)】1.語(yǔ)法和數(shù)據(jù)類(lèi)型 【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤處理 【重溫基...
摘要:本文是重溫基礎(chǔ)系列文章的第十二篇。注意對(duì)象的名稱(chēng),對(duì)大小寫(xiě)敏感。基礎(chǔ)用法第一個(gè)參數(shù)是目標(biāo)對(duì)象,后面參數(shù)都是源對(duì)象。用途遍歷對(duì)象屬性。用途將對(duì)象轉(zhuǎn)為真正的結(jié)構(gòu)。使用場(chǎng)景取出參數(shù)對(duì)象所有可遍歷屬性,拷貝到當(dāng)前對(duì)象中。類(lèi)似方法合并兩個(gè)對(duì)象。 本文是 重溫基礎(chǔ) 系列文章的第十二篇。 今日感受:需要總結(jié)下2018。 這幾天,重重的感冒發(fā)燒,在家休息好幾天,傷···。 系列目錄: 【復(fù)習(xí)資料...
閱讀 543·2019-08-30 15:55
閱讀 953·2019-08-29 15:35
閱讀 1208·2019-08-29 13:48
閱讀 1919·2019-08-26 13:29
閱讀 2945·2019-08-23 18:26
閱讀 1254·2019-08-23 18:20
閱讀 2841·2019-08-23 16:43
閱讀 2716·2019-08-23 15:58