在JavaScript中對字符串進(jìn)行索引、拆分和操作的示例代碼
簡介
字符串是一個包含一個或多個字符的序列,可以由字母、數(shù)字或符號組成。JavaScript 字符串中的每個字符都可以通過索引號訪問,并且所有字符串都有可用的方法和屬性。
在本教程中,我們將學(xué)習(xí)字符串原始值和String
對象之間的區(qū)別,字符串的索引方式,如何訪問字符串中的字符,以及字符串常用的屬性和方法。
字符串原始值和字符串對象
首先,我們將澄清兩種字符串類型。JavaScript 區(qū)分字符串原始值(不可變數(shù)據(jù)類型)和String
對象。
為了測試兩者之間的區(qū)別,我們將初始化一個字符串原始值和一個字符串對象。
// 初始化一個新的字符串原始值 const stringPrimitive = "一個新的字符串。"; // 初始化一個新的字符串對象 const stringObject = new String("一個新的字符串。");
我們可以使用typeof
運(yùn)算符來確定一個值的類型。在第一個示例中,我們只是將一個字符串賦給一個變量。
typeof stringPrimitive;
string
在第二個示例中,我們使用new String()
來創(chuàng)建一個字符串對象,并將其賦給一個變量。
typeof stringObject;
object
大多數(shù)情況下,您將創(chuàng)建字符串原始值。JavaScript 能夠訪問和利用String對象包裝器的內(nèi)置屬性和方法,而無需將您創(chuàng)建的字符串原始值實(shí)際轉(zhuǎn)換為對象。
雖然這個概念一開始可能有點(diǎ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
對于這兩種方法,您還可以在字符串中搜索多個字符。它將返回實(shí)例中第一個字符的索引號。
"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í)際字符數(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" 替換第一個實(shí)例的 "How" const newString = originalString.replace("How", "Where"); console.log(newString);
Where are you?
除了能夠用另一個字符串值替換值之外,我們還可以使用正則表達(dá)式使 replace()
更加強(qiáng)大。例如,replace()
只影響第一個值,但我們可以使用 g
(全局)標(biāo)志來捕獲所有實(shí)例的值,以及 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)文章
【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼
下面小編就為大家?guī)硪黄綣S+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼。小編覺得挺不錯的,現(xiàn)在分享給大家。給大家一個參考2016-03-03ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)代碼實(shí)例
我們在繪制柱狀圖時如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)的相關(guān)資料,需要的朋友可以參考下2023-11-11js中scrollTop()方法和scroll()方法用法示例
這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結(jié)合實(shí)例形式分析了scrollTop()方法和scroll()方法滾動操作的用法與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10JS中字符問題(二進(jìn)制/十進(jìn)制/十六進(jìn)制及ASCII碼之間的轉(zhuǎn)換)
對于js的進(jìn)制轉(zhuǎn)換的一些方法分析2008-11-11Javascript實(shí)現(xiàn)獲取窗口的大小和位置代碼分享
這篇文章主要分享了一段Javascript實(shí)現(xiàn)獲取窗口的大小和位置代碼,兼容性非常好,這里推薦給大家2014-12-12JavaScript面試開發(fā)常用的知識點(diǎn)總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了JavaScript面試開發(fā)常用的知識點(diǎn),感興趣的小伙伴們可以參考一下2016-08-08