通過圖文詳細(xì)講解JavaScript中的字符串方法

更新時間：2024年12月21日 11:24:50 作者：清清ww

這篇文章主要介紹了JavaScript中字符串方法的相關(guān)資料,文中包括字符串長度、查找字符串、提取字符串、替換字符串、大小寫轉(zhuǎn)換、連接字符串、刪除空白符、提取字符以及字符串轉(zhuǎn)數(shù)組等方法,需要的朋友可以參考下

一.字符串查找

1.length屬性

字符串長度。從1開始計數(shù)。

注意索引是從0開始的，但是長度是從1開始的。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var txt = "零一二三四五六";
document.getElementById("demo").innerHTML = txt.length; // 輸出7
</script>

</body>
</html>

2. indexOf( )方法

查找字符串中的字符串，返回第一個匹配項的位置，如果未找到則返回-1。

可接受兩個參數(shù):待查字符串、檢索起始位置。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
document.getElementById("demo").innerHTML = pos; // 輸出17
</script>

</body>
</html>

3.lastIndexOf（）方法

返回指定文本在字符串中最后一次出現(xiàn)的索引，如果未找到則返回-1。

可接受兩個參數(shù):待查字符串、檢索起始位置。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

檢索起始位置：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);
document.getElementById("demo").innerHTML = pos; // 輸出17
</script>

</body>
</html>

有意思的是，當(dāng)我們把索引位置改為“17”，返回的仍舊是“17”而不是“-1” 。因為雖然 "hina" 部分在位置 17 之后，但是完整的子字符串 "China" 在位置 17 處是完全匹配的，所以返回“17”。

4.search（）方法

搜索特定值的字符串，并返回匹配的位置。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");
document.getElementById("demo").innerHTML = pos; // 輸出17
</script>

</body>
</html>

它和indexOf很像，但兩種方法并不完全相等的。

search() 方法無法設(shè)置第二個開始位置參數(shù)，但可以設(shè)置更強大的搜索值（正則表達式）。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>search() 方法使用正則表達式來查找字符串中的模式：</p>

<p id="demo"></p>

<script>
var str = "Visit W3Schools! Visit Microsoft!";
var n = str.search(/W3Schools/i); // 使用正則表達式，'i' 表示不區(qū)分大小寫
document.getElementById("demo").innerHTML = n; // 輸出6
</script>

</body>
</html>

二.提取字符串

1.slice（）方法

提取字符串的某個部分，并在新字符串中返回被提取的部分。

接受兩個參數(shù)（開始位置，結(jié)束位置）

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
 
<script>
var str = "Apple,Banana,Mango";
var res = str.slice(6,12);
document.getElementById("demo").innerHTML = res; // 輸出Banana
</script>

</body>
</html>

如果某個參數(shù)為負(fù)，則從字符串的結(jié)尾開始計數(shù)。

原字符串仍然存在且未發(fā)生任何改變，只是生成了一個新的字符串。

2.subString（）方法

與slice（）方法類似，但是該方法不能接受負(fù)的索引。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "Apple,Banana,Mango";
var res = str.substring( 0,5);
document.getElementById("demo").innerHTML = res; // 輸出Apple
</script>

</body>
</html>

3.substr（）方法

與slice（）方法類似，但是該方法的第二個參數(shù)指的是被提取部分的長度。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "Apple,Banana,Mango";
var res = str.substr(6,6);
document.getElementById("demo").innerHTML = res; // 輸出Banana
</script>

</body>
</html>

如果省略第二個參數(shù)，則將從起始位置開始，裁剪字符串的剩余部分。

如果首個參數(shù)為負(fù)，則從字符串的結(jié)尾計算位置。

三.替換字符串內(nèi)容

replace（）方法

用另一個值替換在字符串中指定的值。第一個參數(shù)為想取代的值，第二個參數(shù)為新值。

<!DOCTYPE html>
<html>
<body>

<p>來客人了，記得把“oldApple”替換為“newApple”：</p>

<button onclick="myFunction()">點擊換新蘋果</button>

<p id="demo">請吃oldApple！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("oldApple","newApple");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

運行結(jié)果：

replace（）方法不會改變調(diào)用它的字符串。它返回的是新字符串。

（1）默認(rèn)只替換首個匹配到的

如需替換所有匹配，可以使用正則表達式的 g 標(biāo)志（用于全局搜索）。注意正則表達式不帶引號。

str = "請吃oldApple,oldApple,oldApple";
var n = str.replace(/oldApple/g, "newApple");

（2）對大小寫敏感。

<!DOCTYPE html>
<html>
<body>

<p>來客人了，記得把“oldApple”替換為“newApple”：</p>

<button onclick="myFunction()">點擊換新蘋果</button>

<p id="demo">請吃oldApple！</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("OLDAPPLE","newApple");
  document.getElementById("demo").innerHTML = txt; // 替換失敗
}
</script>

</body>
</html>

如需執(zhí)行大小寫不敏感的替換，可以使用正則表達式 i（大小寫不敏感）。

str = "請吃oldApple";
var n = str.replace(/OLDAPPLE/i, "newApple");

四，大小寫轉(zhuǎn)換

1.toUpperCase（）方法

把字符串轉(zhuǎn)換為大寫

<!DOCTYPE html>
<html>
<body>

<p>把字符串轉(zhuǎn)換為大寫：</p>

<button onclick="myFunction()">點擊轉(zhuǎn)換為大寫</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  var text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>

</body>
</html>

運行結(jié)果：

2.toLowerCase（）方法

把字符串轉(zhuǎn)換為小寫

<!DOCTYPE html>
<html>
<body>

<p>把字符串轉(zhuǎn)換為小寫：</p>

<button onclick="myFunction()">點擊轉(zhuǎn)換為小寫</button>

<p id="demo">HELLO World!</p>

<script>
function myFunction() {
  var text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>

</body>
</html>

運行結(jié)果：

五.連接字符串

concat（）方法

連接兩個或多個字符串

<!DOCTYPE html>
<html>
<body>

<p>concat() 方法連接兩個或多個字符串：</p>

<p id="demo"></p>

<script>
var text1 = "Hello";
var text2 = "World!";
var text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>

六.刪除兩端空白符

trim（）方法

刪除字符串兩端的空白符

<!DOCTYPE html>
<html>
<body>

<p>點擊這個按鈕來輸出已刪除空白字符的字符串。</p>

<button onclick="myFunction()">試一試</button>

<script>
function myFunction() {
  var str = "     Hello World!     ";
  alert(str.trim()); // 彈出Hello World!
}
</script>

</body>
</html>

七.提取字符串字符

1.charAt（）方法

返回字符串中指定下標(biāo)（位置）的字符串

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0); // 輸出H
</script>

</body>
</html>

2.charCodeAt（）方法

與charAt（）類似，只是返回的字符串中指定位置的字符 unicode 編碼。

八.把字符串轉(zhuǎn)換為數(shù)組

split（）方法

把字符串轉(zhuǎn)換為數(shù)組

<!DOCTYPE html>
<html>
<body>

<p>單擊“試一試”以顯示字符串拆分后的數(shù)組。</p>

<button onclick="myFunction()">試一試</button>

<p id="demo"></p>

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr;
}
</script>

</body>
</html>

運行結(jié)果：

總結(jié)

到此這篇關(guān)于JavaScript中字符串方法的文章就介紹到這了,更多相關(guān)JS中字符串方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過圖文詳細(xì)講解JavaScript中的字符串方法

目錄

一.字符串查找

1.length屬性

2. indexOf( )方法

3.lastIndexOf（）方法

4.search（）方法

二.提取字符串

1.slice（）方法

2.subString（）方法

3.substr（）方法

三.替換字符串內(nèi)容

replace（）方法

四，大小寫轉(zhuǎn)換

1.toUpperCase（）方法

2.toLowerCase（）方法

五.連接字符串

concat（）方法

六.刪除兩端空白符

trim（）方法

七.提取字符串字符

1.charAt（）方法

2.charCodeAt（）方法

八.把字符串轉(zhuǎn)換為數(shù)組

split（）方法

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過圖文詳細(xì)講解JavaScript中的字符串方法

目錄

一.字符串查找

1.length屬性

2. indexOf( )方法

3.lastIndexOf（）方法

4.search（ ）方法

二.提取字符串

1.slice（ ）方法

2.subString（ ）方法

3.substr（ ）方法

三.替換字符串內(nèi)容

replace（ ）方法

四，大小寫轉(zhuǎn)換

1.toUpperCase（ ）方法

2.toLowerCase（ ）方法

五.連接字符串

concat（ ）方法

六.刪除兩端空白符

trim（ ）方法

七.提取字符串字符

1.charAt（ ）方法

2.charCodeAt（ ）方法

八.把字符串轉(zhuǎn)換為數(shù)組

split（ ）方法

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

4.search（）方法

1.slice（）方法

2.subString（）方法

3.substr（）方法

replace（）方法

四，大小寫轉(zhuǎn)換

1.toUpperCase（）方法

2.toLowerCase（）方法

concat（）方法

trim（）方法

1.charAt（）方法

2.charCodeAt（）方法

split（）方法