在JavaScript中對字符串進(jìn)行索引、拆分和操作的示例代碼
簡介
字符串是一個包含一個或多個字符的序列,可以由字母、數(shù)字或符號組成。JavaScript 字符串中的每個字符都可以通過索引號訪問,并且所有字符串都有可用的方法和屬性。
在本教程中,我們將學(xué)習(xí)字符串原始值和String對象之間的區(qū)別,字符串的索引方式,如何訪問字符串中的字符,以及字符串常用的屬性和方法。
字符串原始值和字符串對象
首先,我們將澄清兩種字符串類型。JavaScript 區(qū)分字符串原始值(不可變數(shù)據(jù)類型)和String對象。
為了測試兩者之間的區(qū)別,我們將初始化一個字符串原始值和一個字符串對象。
// 初始化一個新的字符串原始值
const stringPrimitive = "一個新的字符串。";
// 初始化一個新的字符串對象
const stringObject = new String("一個新的字符串。");
我們可以使用typeof運算符來確定一個值的類型。在第一個示例中,我們只是將一個字符串賦給一個變量。
typeof stringPrimitive;
string
在第二個示例中,我們使用new String()來創(chuàng)建一個字符串對象,并將其賦給一個變量。
typeof stringObject;
object
大多數(shù)情況下,您將創(chuàng)建字符串原始值。JavaScript 能夠訪問和利用String對象包裝器的內(nèi)置屬性和方法,而無需將您創(chuàng)建的字符串原始值實際轉(zhuǎn)換為對象。
雖然這個概念一開始可能有點具有挑戰(zhàn)性,但您應(yīng)該意識到原始值和對象之間的區(qū)別?;旧?,所有字符串都有可用的方法和屬性,在后臺,JavaScript 將在每次調(diào)用方法或?qū)傩詴r執(zhí)行從原始值到對象的轉(zhuǎn)換和再轉(zhuǎn)換。
字符串的索引方式
字符串中的每個字符都對應(yīng)一個索引號,從0開始。
為了演示,我們將創(chuàng)建一個值為How are you?的字符串。
| H | o | w | a | r | e | y | o | u | ? | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
字符串中的第一個字符是H,對應(yīng)索引0。最后一個字符是?,對應(yīng)11??崭褡址灿兴饕?,分別為3和7。
能夠訪問字符串中的每個字符給了我們許多處理和操作字符串的方式。
訪問字符
我們將演示如何訪問How are you?字符串中的字符和索引。
"How are you?";
使用方括號表示法,我們可以訪問字符串中的任何字符。
"How are you?"[5];
r
我們還可以使用charAt()方法,通過索引號作為參數(shù)返回字符。
"How are you?".charAt(5);
r
或者,我們可以使用indexOf()來返回第一次出現(xiàn)字符的索引號。
"How are you?".indexOf("o");
1
盡管"o"在How are you?字符串中出現(xiàn)了兩次,indexOf()將返回第一次出現(xiàn)的索引號。
lastIndexOf()用于查找最后一次出現(xiàn)的位置。
"How are you?".lastIndexOf("o");
9
對于這兩種方法,您還可以在字符串中搜索多個字符。它將返回實例中第一個字符的索引號。
"How are you?".indexOf("are");
4
另一方面,slice()方法返回兩個索引號之間的字符。第一個參數(shù)將是起始索引號,第二個參數(shù)將是應(yīng)該結(jié)束的索引號。
"How are you?".slice(8, 11);
you
請注意,11是?,但?不是返回輸出的一部分。slice()將返回介于兩個參數(shù)之間的內(nèi)容,但不包括最后一個參數(shù)。
如果不包括第二個參數(shù),slice()將返回從參數(shù)到字符串末尾的所有內(nèi)容。
"How are you?".slice(8);
you?
總之,charAt()和slice()將幫助根據(jù)索引號返回字符串值,而indexOf()和lastIndexOf()將相反,根據(jù)提供的字符串字符返回索引號。
尋找字符串的長度
使用 length 屬性,我們可以返回字符串中字符的數(shù)量。
"How are you?".length;
12
請記住,length 屬性返回的是實際字符數(shù)量,從 1 開始計數(shù),因此結(jié)果是 12,而不是最終索引號,最終索引號從 0 開始到 11 結(jié)束。
轉(zhuǎn)換為大寫或小寫
兩個內(nèi)置方法 toUpperCase() 和 toLowerCase() 是 JavaScript 中格式化文本和進(jìn)行文本比較的有用方式。
toUpperCase() 會將所有字符轉(zhuǎn)換為大寫字符。
"How are you?".toUpperCase();
HOW ARE YOU?
toLowerCase() 會將所有字符轉(zhuǎn)換為小寫字符。
"How are you?".toLowerCase();
how are you?
這兩種格式化方法不需要額外的參數(shù)。
值得注意的是,這些方法不會改變原始字符串。
分割字符串
JavaScript 有一個非常有用的方法,可以通過一個字符來分割字符串,并創(chuàng)建一個新的數(shù)組。我們將使用 split() 方法通過空格字符 " " 來分割數(shù)組。
const originalString = "How are you?";
// 通過空格字符分割字符串
const splitString = originalString.split(" ");
console.log(splitString);
[ 'How', 'are', 'you?' ]
現(xiàn)在我們在 splitString 變量中有了一個新的數(shù)組,我們可以通過索引號訪問每個部分。
splitString[1];
are
如果給定一個空參數(shù),split() 將創(chuàng)建一個以逗號分隔的數(shù)組,其中包含字符串中的每個字符。
通過分割字符串,您可以確定句子中有多少個單詞,并將該方法用作確定人們的名字和姓氏的一種方式,例如。
去除空格
JavaScript 的 trim() 方法會從字符串的兩端去除空格,但不會去除中間的空格。空格可以是制表符或空格。
const tooMuchWhitespace = " How are you? "; const trimmed = tooMuchWhitespace.trim(); console.log(trimmed);
How are you?
trim() 方法是執(zhí)行去除多余空格的常見任務(wù)的簡單方式。
查找和替換字符串值
我們可以使用 replace() 方法搜索字符串中的值,并用新值替換它。第一個參數(shù)將是要查找的值,第二個參數(shù)將是要替換它的值。
const originalString = "How are you?"
// 用 "Where" 替換第一個實例的 "How"
const newString = originalString.replace("How", "Where");
console.log(newString);
Where are you?
除了能夠用另一個字符串值替換值之外,我們還可以使用正則表達(dá)式使 replace() 更加強(qiáng)大。例如,replace() 只影響第一個值,但我們可以使用 g(全局)標(biāo)志來捕獲所有實例的值,以及 i(不區(qū)分大小寫)標(biāo)志來忽略大小寫。
const originalString = "Javascript is a programming language. I'm learning javascript." // 搜索字符串中的 "javascript" 并替換為 "JavaScript" const newString = originalString.replace(/javascript/gi, "JavaScript"); console.log(newString);
這是一個非常常見的任務(wù),利用了正則表達(dá)式。訪問 Regexr 以練習(xí)更多正則表達(dá)式的示例。
結(jié)論
字符串是最常用的數(shù)據(jù)類型之一,我們可以做很多事情。
在本教程中,我們學(xué)習(xí)了字符串原始值和 String 對象之間的區(qū)別,字符串的索引方式,以及如何使用字符串的內(nèi)置方法和屬性來訪問字符、格式化文本以及查找和替換值。
以上就是在JavaScript中對字符串進(jìn)行索引、拆分和操作的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JavaScript字符串索引、拆分和操作的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript編程中如何進(jìn)行函數(shù)封裝
在實際應(yīng)用中,為了提高代碼的可重用性、可維護(hù)性和簡潔性,開發(fā)者常常需要對常用功能進(jìn)行函數(shù)封裝,這篇文章主要介紹了JavaScript編程中如何進(jìn)行函數(shù)封裝的相關(guān)資料,需要的朋友可以參考下2026-01-01
如何使用require.context實現(xiàn)優(yōu)雅的預(yù)加載
這篇文章主要介紹了使用require.context實現(xiàn)優(yōu)雅的預(yù)加載?,需要的朋友可以參考下2023-05-05
JavaScript實現(xiàn)簡單網(wǎng)頁版計算器
這篇文章主要介紹了JavaScript實現(xiàn)簡單網(wǎng)頁版計算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08
Bootstrap popover 實現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法
下面小編就為大家分享一篇Bootstrap popover 實現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
javascript 模擬JQuery的Ready方法實現(xiàn)并出現(xiàn)的問題
今天在閱讀網(wǎng)上一些模擬Jq的ready方法時,發(fā)現(xiàn)一些小細(xì)節(jié),就是網(wǎng)上的ready事件大部分都是在onload事件執(zhí)行后加載,而jquery確能在onload加載前。2009-12-12

