JavaScript字符串常見(jiàn)基礎(chǔ)方法有哪些

這篇文章主要介紹了JavaScript字符串常見(jiàn)基礎(chǔ)方法有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇JavaScript字符串常見(jiàn)基礎(chǔ)方法有哪些文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

前言

字符串就是由字符組成的串，如果學(xué)習(xí)過(guò)C、Java就應(yīng)該知道，字符本身也可以獨(dú)立成為一個(gè)類型。但是，JavaScript沒(méi)有單個(gè)的字符類型，只有長(zhǎng)度為1的字符串。

JavaScript的字符串采用固定的UTF-16編碼，不論我們編寫(xiě)程序時(shí)采用何種編碼，都不會(huì)影響。

寫(xiě)法

字符串有三種寫(xiě)法：?jiǎn)我?hào)、雙引號(hào)、反引號(hào)。

let single = 'abcdefg';//單引號(hào)let double = "asdfghj";//雙引號(hào)let backti = `zxcvbnm`;//反引號(hào)

單、雙引號(hào)具有相同的地位，我們不做區(qū)分。

字符串格式化

反引號(hào)允許我們使用${...}優(yōu)雅的格式化字符串，取代使用字符串加運(yùn)算。

let str = `I'm ${Math.round(18.5)} years old.`;console.log(str);

代碼執(zhí)行結(jié)果：

多行字符串

反引號(hào)還可以允許字符串跨行，當(dāng)我們編寫(xiě)多行字符串的時(shí)候非常有用。

let ques = `Is the author handsome?
A. Very handsome;
B. So handsome;
C. Super handsome;`;console.log(ques);

代碼執(zhí)行結(jié)果：

是不是看起來(lái)覺(jué)得也沒(méi)有什么？但是使用單雙引號(hào)是不能實(shí)現(xiàn)的，如果想要得到同樣的結(jié)果可以這么寫(xiě)：

let ques = 'Is the author handsome?\nA. Very handsome;\nB. So handsome;\nC. Super handsome;';console.log(ques);

以上代碼包含了一個(gè)特殊字符\n，它是我們編程過(guò)程中最常見(jiàn)的特殊字符了。

特殊字符

字符\n又名"換行符"，支持單雙引號(hào)輸出多行字符串。當(dāng)引擎輸出字符串時(shí)，若遇到\n，就會(huì)另?yè)Q一行繼續(xù)輸出，從而實(shí)現(xiàn)多行字符串。

雖然\n看起來(lái)是兩個(gè)字符，但是只占用一個(gè)字符位置，這是因?yàn)?code>\在字符串中是轉(zhuǎn)義符，被轉(zhuǎn)義符修飾的字符就變成了特殊字符。

特殊字符列表

舉個(gè)例子：

console.log('I\'m a student.');// \'console.log("\"I love U\"");// \"console.log("\\n is new line character.");// \nconsole.log('\u00A9')// ?console.log('\u{1F60D}');//

代碼執(zhí)行結(jié)果：

有了轉(zhuǎn)義符\的存在，理論上我們可以輸出任何字符，只要找到它對(duì)應(yīng)的編碼就可以了。

避免使用\'、\"

對(duì)于字符串中的單雙引號(hào)，我們可以通過(guò)在單引號(hào)中使用雙引號(hào)、在雙引號(hào)中使用單引號(hào)，或者直接在反引號(hào)中使用單雙引號(hào)，就可以巧妙的避免使用轉(zhuǎn)義符，例如：

console.log("I'm a student.");
//雙引號(hào)中使用單引號(hào)console.log('"" is used.');
//單引號(hào)中使用雙引號(hào)console.log(`' " is used.`);
//反引號(hào)中使用單雙引號(hào)

代碼執(zhí)行結(jié)果如下：

.length

通過(guò)字符串的.length屬性，我們可以獲得字符串的長(zhǎng)度：

console.log("HelloWorld\n".length);//11

這里\n只占用了一個(gè)字符。

《基礎(chǔ)類型的方法》章節(jié)我們探究了JavaScript中的基礎(chǔ)類型為什么會(huì)有屬性和方法，你還記得嗎？

訪問(wèn)字符、charAt()、for…of

字符串是字符組成的串，我們可以通過(guò)[字符下標(biāo)]訪問(wèn)單個(gè)的字符，字符下標(biāo)從0開(kāi)始：

let str = "The author is handsome.";
console.log(str[0]);//Tconsole.log(str[4]);//aconsole.log(str[str.length-1]);//.

代碼執(zhí)行結(jié)果：

我們還可以使用charAt(post)函數(shù)獲得字符：

let str = "The author is handsome.";console.log(str.charAt(0));
//Tconsole.log(str.charAt(4));
//aconsole.log(str.charAt(str.length-1));//.

二者執(zhí)行效果完全相同，唯一的區(qū)別在于越界訪問(wèn)字符時(shí)：

let str = "01234";console.log(str[9]);//undefinedconsole.log(str.charAt(9));//""（空串）

我們還可以使用for ..of遍歷字符串：

for(let c of '01234'){
    console.log(c);}

字符串不可變

JavaScript中的字符串一經(jīng)定義就不可更改，舉個(gè)例子：

let str = "Const";str[0] = 'c' ;console.log(str);

代碼執(zhí)行結(jié)果：

如果想獲得一個(gè)不一樣的字符串，只能新建：

let str = "Const";str = str.replace('C','c');console.log(str);

看起來(lái)我們似乎改變了字符串，實(shí)際上原來(lái)的字符串并沒(méi)有被改變，我們得到的是replace方法返回的新字符串。

.toLowerCase()、.toUpperCase()

轉(zhuǎn)換字符串大小寫(xiě)，或者轉(zhuǎn)換字符串中單個(gè)字符的大小寫(xiě)。

這兩個(gè)字符串的方法比較簡(jiǎn)單，舉例帶過(guò)：

console.log('Good Boy'.toLowerCase());//good 
boyconsole.log('Good Boy'.toUpperCase());//GOOD 
BOYconsole.log('Good Boy'[5].toLowerCase());//b

代碼執(zhí)行結(jié)果：

.indexOf()、.lastIndexOf() 查找子串

.indexOf(substr,idx)函數(shù)從字符串的idx位置開(kāi)始，查找子串substr的位置，成功返回子串首字符下標(biāo)，失敗返回-1。

let str = "google google";console.log(str.indexOf('google'));
//0 idx默認(rèn)為0console.log(str.indexOf('google',1));
//7 從第二個(gè)字符開(kāi)始查找console.log(str.indexOf('xxx'));
//-1 沒(méi)找到返回-1

代碼執(zhí)行結(jié)果：

如果我們想查詢字符串中所有子串位置，可以使用循環(huán)：

let str = "I love love love love u.";let sub = "love";let pos = -1;while((pos = str.indexOf(sub,pos+1)) != -1)
    console.log(pos);

代碼執(zhí)行結(jié)果如下：

.lastIndexOf(substr,idx)倒著查詢子串，首先查找最后一個(gè)符合的串：

let str = "google google";console.log(str.lastIndexOf('google'));//7 idx默認(rèn)為0

按位取反技巧（不推薦，但要會(huì)）

由于indexOf()和lastIndexOf()方法在查詢不成功的時(shí)候會(huì)返回-1，而~-1 === 0。也就是說(shuō)只有在查詢結(jié)果不為-1的情況下使用~才為真，所以我們可以：

let str = "google google";if(~indexOf('google',str)){
    ...}

通常情況下，我們不推薦在不能明顯體現(xiàn)語(yǔ)法特性的地方使用一個(gè)語(yǔ)法，這會(huì)在可讀性上產(chǎn)生影響。好在以上代碼只出現(xiàn)在舊版本的代碼中，這里提到就是為了大家在閱讀舊代碼的時(shí)候不會(huì)產(chǎn)生困惑。

補(bǔ)充：

~是按位取反運(yùn)算符，例如：十進(jìn)制的數(shù)字2的二進(jìn)制形式為0010，~2的二進(jìn)制形式就是1101（補(bǔ)碼），也就是-3。

簡(jiǎn)單的理解方式，~n等價(jià)于-(n+1)，例如：~2 === -(2+1) === -3

.includes()、.startsWith()、.endsWith()

1. .includes(substr,idx)用于判斷substr是否在字符串中，idx是查詢開(kāi)始的位置

   console.log('Google Google'.includes('Google'));//trueconsole.log('Google Google'.includes('xxxxxx'));//falseconsole.log('9966'.includes('99',1));//false

   代碼執(zhí)行結(jié)果：

   

2. .startsWith('substr')和.endsWith('substr')分別判斷字符串是否以substr開(kāi)始或結(jié)束

   console.log("google".startsWith('go'));//trueconsole.log('google'.endsWith('le'));//trueconsole.log('google'.endsWith('ie'));//false

   代碼執(zhí)行結(jié)果：

   

.substr()、.substring()、.slice()

.substr()、.substring()、.slice()均用于取字符串的子串，不過(guò)用法各有不同。

1. .substr(start,len)

   返回字符串從start開(kāi)始len個(gè)字符組成的字符串，如果省略len，就截取到原字符串的末尾。start可以為負(fù)數(shù)，表示從后往前第start個(gè)字符。

   let str = "0123456789";console.log(str.substr(1))//123456789，從1開(kāi)始到最后console.log(str.substr(3,2))//34，從3開(kāi)始的2個(gè)字符console.log(str.substr(-3,2))//78，倒數(shù)第二個(gè)開(kāi)始

   代碼執(zhí)行結(jié)果：

   

2. .slice(start,end)

   返回字符串從start開(kāi)始到end結(jié)束（不包括）的字符串。start和end可以為負(fù)數(shù)，表示倒數(shù)第start/end個(gè)字符。

   let str = '0123456789';console.log(str.slice(1,5));//1234，區(qū)間[1,5)之間的字符console.log(str.slice(1));//123456789，從1到結(jié)尾console.log(str.slice(-4,-1));//678，倒數(shù)第四個(gè)到倒數(shù)第1個(gè)

   代碼執(zhí)行結(jié)果：

   

3. .substring(start,end)

   作用幾乎和.slice()相同，差別在兩個(gè)地方：

   舉例：

   let str = '0123456789';console.log(str.substring(1,3));//12console.log(str.substring(3,1));//12console.log(str.substring(-1,3));//012，-1被當(dāng)作0

   代碼執(zhí)行結(jié)果：

   

• 允許end > start;

• 不允許負(fù)數(shù)，負(fù)數(shù)視為0;

對(duì)比三者的區(qū)別：

方法多了自然就選擇困難了，這里建議記住.slice()就可以了，相比于其他兩種更靈活。

.codePointAt()、String.fromCodePoint()

我們?cè)谇拔闹幸呀?jīng)提及過(guò)字符串的比較，字符串按照字典序進(jìn)行排序，每個(gè)字符背后都是一個(gè)編碼，ASCII編碼就是一個(gè)重要的參考。

例如:

console.log('a'>'Z');//true

字符之間的比較，本質(zhì)上是代表字符的編碼之間的比較。JavaScript使用UTF-16編碼字符串，每個(gè)字符都是一個(gè)16為的代碼，想要知道比較的本質(zhì)，就需要使用.codePointAt(idx)獲得字符的編碼：

console.log('a'.codePointAt(0));//97console.log('Z'.codePointAt(0));//90

代碼執(zhí)行結(jié)果：

使用String.fromCodePoint(code)可以把編碼轉(zhuǎn)為字符：

console.log(String.fromCodePoint(97));console.log(String.fromCodePoint(90));

代碼執(zhí)行結(jié)果如下：

這個(gè)過(guò)程可以用轉(zhuǎn)義符\u實(shí)現(xiàn)，如下：

console.log('\u005a');//Z，005a是90的16進(jìn)制寫(xiě)法console.log('\u0061');//a，0061是97的16進(jìn)制寫(xiě)法

下面我們探索一下編碼為[65,220]區(qū)間的字符：

let str = '';for(let i = 65; i<=220; i++){
    str+=String.fromCodePoint(i);}console.log(str);

代碼執(zhí)行部分結(jié)果如下：

上圖并沒(méi)有展示所有的結(jié)果，快去試試吧。

.localeCompare()

基于國(guó)際化標(biāo)準(zhǔn)ECMA-402，JavaScript已經(jīng)實(shí)現(xiàn)了一個(gè)特殊的方法（.localeCompare()）比較各種字符串，采用str1.localeCompare(str2)的方式：

1. 如果str1 < str2，返回負(fù)數(shù)；

2. 如果str1 > str2，返回正數(shù)；

3. 如果str1 == str2,返回0；

舉個(gè)例子：

console.log("abc".localeCompare('def'));//-1

為什么不直接使用比較運(yùn)算符呢？

這是因?yàn)橛⑽淖址幸恍┨厥獾膶?xiě)法，例如，á是a的變體：

console.log('á' < 'z');//false

雖然也是a，但是比z還要大??！

此時(shí)就需要使用.localeCompare()方法：

console.log('á'.localeCompare('z'));//-1

常用方法

1. str.trim()去除字符串前后空白字符，str.trimStart()、str.trimEnd()刪除開(kāi)頭、結(jié)尾的空格；

   let str = "  999   ";console.log(str.trim());//999

2. str.repeat(n)重復(fù)n次字符串；

   let str = '6';console.log(str.repeat(3));//666

3. str.replace(substr,newstr)替換第一個(gè)子串，str.replaceAll()用于替換所有子串；

   let str = '9+9';console.log(str.replace('9','6'));//6+9console.log(str.replaceAll('9','6'));//6+6

還有很多其他方法，我們可以訪問(wèn)手冊(cè)獲取更多知識(shí)。

進(jìn)階內(nèi)容

生僻字、emoji、特殊符號(hào)

JavaScript使用UTF-16編碼字符串，也就是使用兩個(gè)字節(jié)（16位）表示一個(gè)字符，但是16位數(shù)據(jù)只能表示65536個(gè)字符，對(duì)于常見(jiàn)字符自然不在話下，但是對(duì)于生僻字（中文的）、emoji、罕見(jiàn)數(shù)學(xué)符號(hào)等就力不從心了。

這種時(shí)候就需要擴(kuò)展，使用更長(zhǎng)的位數(shù)（32位）表示特殊字符，例如：

console.log(''.length);//2console.log('?'.length);//2

代碼執(zhí)行結(jié)果：

這么做的結(jié)果是，我們無(wú)法使用常規(guī)的方法處理它們，如果我們單個(gè)輸出其中的每個(gè)字節(jié)，會(huì)發(fā)生什么呢？

console.log(''[0]);console.log(''[1]);

代碼執(zhí)行結(jié)果：

可以看到，單個(gè)輸出字節(jié)是不能識(shí)別的。

好在String.fromCodePoint()和.codePointAt()兩個(gè)方法是可以處理這種情況的，這是因?yàn)槎呤亲罱偶尤氲?。在舊版本的JavaScript中，只能使用String.fromCharCode()和.charCodeAt()兩個(gè)方法轉(zhuǎn)換編碼和字符，但是他們不適用于特殊字符的情況。

我們可以通過(guò)判斷一個(gè)字符的編碼范圍，判斷它是否是一個(gè)特殊字符，從而處理特殊字符。如果一個(gè)字符的代碼在0xd800~0xdbff之間，那么他是32位字符的第一部分，它的第二部分應(yīng)該在0xdc00~0xdfff。

舉個(gè)例子：

console.log(''.charCodeAt(0).toString(16));//d83
dconsole.log('?'.charCodeAt(1).toString(16));//de02

代碼執(zhí)行結(jié)果：

規(guī)范化

在英文中，存在很多基于字母的變體，例如：字母 a 可以是 àáa???ā 的基本字符。這些變體符號(hào)并沒(méi)有全部存儲(chǔ)在UTF-16編碼中，因?yàn)樽兓M合太多了。

為了支持所有的變體組合，同樣使用多個(gè)Unicode字符表示單個(gè)變體字符，在編程過(guò)程中，我們可以使用基本字符加上“裝飾符號(hào)”的方式表達(dá)特殊字符：

console.log('a\u0307');//a?
console.log('a\u0308');//a?
console.log('a\u0309');//a?
console.log('E\u0307');//E?
console.log('E\u0308');//E?
console.log('E\u0309');//E?

代碼執(zhí)行結(jié)果：

一個(gè)基礎(chǔ)字母還可以有多個(gè)裝飾，例如：

console.log('E\u0307\u0323');//E??
console.log('E\u0323\u0307');//E??

代碼執(zhí)行結(jié)果：

這里存在一個(gè)問(wèn)題，在多個(gè)裝飾的情況下，裝飾的排序不同，實(shí)際上展示的字符是一樣的。

如果我們直接比較這兩種表示形式，卻會(huì)得到錯(cuò)誤的結(jié)果：

let e1 = 'E\u0307\u0323';
let e2 = 'E\u0323\u0307';
console.log(`${e1}==${e2} is ${e1 == e2}`)

代碼執(zhí)行結(jié)果：

為了解決這種情況，有一個(gè)**Unicode規(guī)范化算法，可以將字符串轉(zhuǎn)為通用**格式，由str.normalize()實(shí)現(xiàn)：

let e1 = 'E\u0307\u0323';
let e2 = 'E\u0323\u0307';
console.log(`${e1}==${e2} is ${e1.normalize() == e2.normalize()}`)

代碼執(zhí)行結(jié)果：

關(guān)于“JavaScript字符串常見(jiàn)基礎(chǔ)方法有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“JavaScript字符串常見(jiàn)基礎(chǔ)方法有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。