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

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

 更新時間：2024年12月21日 11:24:50   作者：清清ww  
這篇文章主要介紹了JavaScript中字符串方法的相關資料,文中包括字符串長度、查找字符串、提取字符串、替換字符串、大小寫轉換、連接字符串、刪除空白符、提取字符以及字符串轉數(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>

有意思的是，當我們把索引位置改為“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ù)，但可以設置更強大的搜索值（正則表達式）。

<!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ù)（開始位置，結束位置）

<!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ù)為負，則從字符串的結尾開始計數(shù)。

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

2.subString（ ）方法

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

<!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ù)為負，則從字符串的結尾計算位置。

三.替換字符串內容

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>

 運行結果：

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

（1）默認只替換首個匹配到的

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

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");

四，大小寫轉換

1.toUpperCase（ ）方法

把字符串轉換為大寫

<!DOCTYPE html>
<html>
<body>

<p>把字符串轉換為大寫：</p>

<button onclick="myFunction()">點擊轉換為大寫</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>

運行結果：

2.toLowerCase（ ）方法

把字符串轉換為小寫

<!DOCTYPE html>
<html>
<body>

<p>把字符串轉換為小寫：</p>

<button onclick="myFunction()">點擊轉換為小寫</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>

運行結果： 

五.連接字符串

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（ ）方法

返回字符串中指定下標（位置）的字符串

<!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 編碼。

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

split（ ）方法

把字符串轉換為數(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>

運行結果：

總結

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

相關文章

最新評論