這篇文章主要介紹了Javascript字符串常用方法詳解的相關資料,在平時工作中經常會用到的，非常不錯，需要的朋友可以參考下。
1：charAt()方法
charAt()返回字符串中x位置的字符，下標從 0 開始。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//charAt(x)返回字符串中x位置的字符，下標從 0 開始。
var myString = 'wangxiaoting';
console.log(myString.charAt(7));
</script>
</html>
打印結果
2：concat() 方法
concat() 方法用於連接兩個或多個字符串，此方法不改變現有的字符串，返回拼接後的新的字符串。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var name="wnagxiaoting"
var singel = name.concat(" is a","beautiful girls")
console.log(singel)
</script>
</html>
打印結果
3：slice()
slice() 提取字符串的一部分片段，並返回一個新的字符串
接收起始位置但不接收末尾位置，俗稱留頭不留尾
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//slice() 方法可提取字符串的某個部分，返回一個新的字符串。
//包括字符串從 start 開始（包括 start）到 end 結束（不包括 end）爲止的所有字符。
var myString="wangxiaoting"
console.log(myString.slice(0,5) ) //打印結果 "wangx"
console.log( myString.slice(1,6)) //打印結果 "angxi"
</script>
</html>
4：substring()
返回位於String對象中指定位置的子字符串，作用是提取字符串的子串，和slice一樣也是留頭不留尾
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//substring() 方法用於提取字符串中介於兩個指定下標之間的字符，
//方返回的子串包括 start 處的字符，但不包括 stop 處的字符，to 可選，如果省略該參數，那麼返回的子串會一直到字符串的結尾。
var myString = 'wangxiaoting';
myString = myString.substring(0,4);
console.log(myString)//打印結果 wang
</script>
</html>
5: substr 方法
返回一個從指定位置開始到指定長度的字符串
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。返回一個新的字符串
var text="wangxiaoting"
console.log(text.substr(3,4)) //打印結果 gxia
console.log(text.substr(2,7)) //打印結果 ngxiaot
</script>
</html>
6：indexOf()
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//從0位置開始搜索，返回第一個匹配的字符串的位置;搜索不到返回-1
var str="ab cd efg";
console.log(str.indexOf("cd"));
var str1="my name is wangxiaoting ";
console.log(str1.indexOf("is"));
//indexOf("要搜索的字符串",開始搜索的位置);
var str2="abcedfghighdckkccccc";
console.log(str2.indexOf("c",13));//從下標是15的位置開始搜索，返回第一個匹配的字符串的位置;搜索不到返回-1
</script>
</html>
7：split 方法
split() 方法用於把一個字符串分割成字符串數組。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
//把一個字符串分割成字符串數組。
var myString="my name is wangxiaoting";
console.log(myString.split(" "));
</script>
</html>
8：trim()
trim() 方法會從一個字符串的兩端刪除空白字符。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var myString = " wang xiao ting ";
console.log(myString.trim());
//打印結果 wang xiao ting
</script>
</html>
9：lastIndexOf(string)
返回String對象內最後一次出現子字符串位置。如果沒有找到子字符串，則返回-1。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var myString = "wangxiaoting"
console.log(myString.lastIndexOf("a")) //6
console.log(myString.lastIndexOf("g")) //11
</script>
</html>
10：toUpperCase方法和toLowerCase方法
toUpperCase方法返回一個字符串，該字符串中的所有字母都被轉換爲大寫字母。
toLowerCase:方法返回一個字符串，該字符串中的字母被轉換成小寫。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var myString = "wangxiaoting"
console.log(myString.toLowerCase());//wangxiaoting
console.log(myString.toUpperCase());//WANGXIAOTING
</script>
</html>
更多方法，見下一篇~