前端切圖仔，常用的21個字符串方法
字符串方法
一：charAt()方法
定義和用法
charAt() 方法可返回指定位置的字符。
請注意，JavaScript 并沒有一種有別于字符串類型的字符數(shù)據(jù)類型，所以返回的字符是長度為 1 的字符串。
實例
在字符串 "Hello world!" 中，我們將返回位置 1 的字符：
<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>
//打印結果e
二：charCodeAt()方法
定義和用法
charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數(shù)。
方法 charCodeAt() 與 charAt() 方法執(zhí)行的操作相似，只不過前者返回的是位于指定位置的字符的編碼，而后者返回的是字符子串。
實例
在字符串 "Hello world!" 中，我們將返回位置 1 的字符的 Unicode 編碼：
<script type="text/javascript">
var str="Hello world!"
document.write(str.charCodeAt(1))
</script>
//打印結果 101
三：concat()方法
定義和用法
concat() 方法用于連接兩個或多個數(shù)組。
該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本。
實例
例子 1
在本例中，我們將把 concat() 中的參數(shù)連接到數(shù)組 a 中：
<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
//輸出：1,2,3,4,5
例子 2
在本例中，我們創(chuàng)建了兩個數(shù)組，然后使用 concat() 把它們連接起來：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
//輸出：George,John,Thomas,James,Adrew,Martin
例子 3
在本例中，我們創(chuàng)建了三個數(shù)組，然后使用 concat() 把它們連接起來：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>
//輸出：George,John,Thomas,James,Adrew,Martin,William,Franklin
四：fromCharCode()
定義和用法
fromCharCode() 可接受一個指定的 Unicode 值，然后返回一個字符串。
實例
在本例中，我們將根據(jù) Unicode 來輸出 "HELLO" 和 "ABC"：
<script type="text/javascript">
document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))
</script>
//以上代碼的輸出：HELLO ABC
五：indexOf()
定義和用法
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
實例
在本例中，我們將在 "Hello world!" 字符串內進行不同的檢索：
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>
以上代碼的輸出：
0
-1
6
六：lastIndexOf()
定義和用法
lastIndexOf() 方法可返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。
實例
在本例中，我們將在 "Hello world!" 字符串內進行不同的檢索：
<script type="text/javascript">
var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
</script>
以上代碼的輸出：
0
-1
6
七：localeCompare()
定義和用法
用本地特定的順序來比較兩個字符串。
實例
在本例中，我們將用本地特定排序規(guī)則對字符串數(shù)組進行排序：
var str;
str.sort (function(a,b){return a.localeCompare(b)})
八：match()
定義和用法
match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。
該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
實例
例子 1
在本例中，我們將在 "Hello world!" 中進行不同的檢索：
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
輸出：
world
null
null
world!
例子 2
在本例中，我們將使用全局匹配的正則表達式來檢索字符串中的所有數(shù)字：
<script type="text/javascript">
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))
</script>
輸出：
1,2,3
九：replace()
定義和用法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
實例
例子 1
在本例中，我們將使用 "W3School" 替換字符串中的 "Microsoft"：
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>
輸出：
Visit W3School!
例子 2
在本例中，我們將執(zhí)行一次全局替換，每當 "Microsoft" 被找到，它就被替換為 "W3School"：
<script type="text/javascript">
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."
document.write(str.replace(/Microsoft/g, "W3School"))
</script>
輸出：
Welcome to W3School! We are proud to announce that W3School
has one of the largest Web Developers sites in the world.
例子 3
您可以使用本例提供的代碼來確保匹配字符串大寫字符的正確：
text = "javascript Tutorial";
text.replace(/javascript/i, "JavaScript");
例子 4
在本例中，我們將把 "Doe, John" 轉換為 "John Doe" 的形式：
name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
例子 5
在本例中，我們將把所有的花引號替換為直引號：
name = '"a", "b"';
name.replace(/"([^"]*)"/g, "'$1'");
例子 6
在本例中，我們將把字符串中所有單詞的首字母都轉換為大寫：
name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase()+word.substring(1);}
);
十：search()
定義和用法
search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。
實例
例子 1
在本例中，我們將檢索 "W3School"：
<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/W3School/))
</script>
輸出：
6
在下面的例子中，無法檢索到 w3school（因為 search() 對大小寫敏感）。
<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/w3school/))
</script>
輸出：
-1
例子 2
在本例中，我們將執(zhí)行一次忽略大小寫的檢索：
<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/w3school/i))
</script>
輸出：
6
十一：slice()方法
定義和用法
slice() 方法可從已有的數(shù)組中返回選定的元素。
實例
例子 1
在本例中，我們將創(chuàng)建一個新數(shù)組，然后顯示從其中選取的元素：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
</script>
輸出：
George,John,Thomas
John,Thomas
George,John,Thomas
例子 2
在本例中，我們將創(chuàng)建一個新數(shù)組，然后顯示從其中選取的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)
</script>
輸出：
George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin
十二：split()方法
定義和用法
split() 方法用于把一個字符串分割成字符串數(shù)組。
實例
例子 1
在本例中，我們將按照不同的方式來分割字符串：
<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>
輸出：
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
例子 2
在本例中，我們將分割結構更為復雜的字符串：
"2:3:4:5".split(":") //將返回["2", "3", "4", "5"]
"|a|b|c".split("|") //將返回["", "a", "b", "c"]
例子 3
使用下面的代碼，可以把句子分割成單詞：
var words = sentence.split(' ')
或者使用正則表達式作為 separator：
var words = sentence.split(/\s+/)
例子 4
如果您希望把單詞分割為字母，或者把字符串分割為字符，可使用下面的代碼：
"hello".split("") //可返回 ["h", "e", "l", "l", "o"]
若只需要返回一部分字符，請使用 howmany 參數(shù)：
"hello".split("", 3) //可返回 ["h", "e", "l"]
十三：substr()方法
定義和用法
substr() 方法可在字符串中抽取從 start 下標開始的指定數(shù)目的字符。
實例
例子 1
在本例中，我們將使用 substr() 從字符串中提取一些字符：
<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3))
</script>
輸出：
lo world!
例子 2
在本例中，我們將使用 substr() 從字符串中提取一些字符：
<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3,7))
</script>
輸出：
lo worl
十四：substring()
定義和用法
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
實例
例子 1
在本例中，我們將使用 substring() 從字符串中提取一些字符：
<script type="text/javascript">
var str="Hello world!"
document.write(`str.substring(3)`)
</script>
輸出：
lo world!
例子 2
在本例中，我們將使用 substring() 從字符串中提取一些字符：
<script type="text/javascript">
var str="Hello world!"
document.write(`str.substring(3,7)`)
</script>
輸出：
lo w
十五：toLocaleLowerCase()
定義和用法
toLocaleLowerCase() 方法用于把字符串轉換為小寫。
實例
在本例中，"Hello world!" 將以小寫字母來顯示：
<script type="text/javascript">
var str="Hello World!"
document.write(str.toLocaleLowerCase())
</script>
十六：toLocaleUpperCase()
定義和用法
toLocaleUpperCase() 方法用于把字符串轉換為大寫。
實例
在本例中，"Hello world!" 將以大寫字母來顯示：
<script type="text/javascript">
var str="Hello World!"
document.write(str.toLocaleUpperCase())
</script>
十七：toLowerCase()
定義和用法
toLowerCase() 方法用于把字符串轉換為小寫。
實例
在本例中，"Hello world!" 將以小寫字母來顯示：
<script type="text/javascript">
var str="Hello World!"
document.write(str.toLowerCase())
</script>
十八：toString()
定義和用法
toString() 方法可把一個 Number 對象轉換為一個字符串，并返回結果。
實例
在本例中，我們將把一個數(shù)字轉換為字符串：
<script type="text/javascript">
var number = new Number(1337);
document.write (number.toString())
</script>
輸出：
1337
十九：toUpperCase()
定義和用法
toUpperCase() 方法用于把字符串轉換為大寫。
實例
在本例中，"Hello world!" 將以大寫字母來顯示：
<script type="text/javascript">
var str="Hello World!"
document.write(str.toUpperCase())
</script>
二十：trim()
定義和用法
trim() 方法用于刪除字符串的頭尾空白符，空白符包括：空格、制表符 tab、換行符等其他空白符等。
trim() 方法不會改變原始字符串。
trim() 方法不適用于 null, undefined, Number 類型。
實例
function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,'');
}
function myFunction() {
var str = myTrim(" Runoob ");
alert(str);
}
輸出結果
Runoob
二十一：valueOf()
定義和用法
valueOf() 方法可返回 String 對象的原始值。
注意：valueOf() 方法通常由 JavaScript 在后臺自動進行調用，而不是顯式地處于代碼中。
實例
返回 String 對象的原始值:
<script>
var str="Hello world!";
document.write(str.valueOf());
</script>
以上實例輸出結果:
Hello world!
參考：https://www.runoob.com/jsref/jsref-obj-string.html
大家好，這個月的干貨又整理出來了。
26個經典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費）
話不多說，關注「前端小辣椒」公眾號 ，在微信后臺回復「小程序」，獲取以下小程序整源碼大全。