前端切图仔，常用的21个字符串方法
共 10614字，需浏览 22分钟
· 2021-07-27
字符串方法
一：charAt()方法
定义和用法
charAt() 方法可返回指定位置的字符。
请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
实例
在字符串 "Hello world!" 中，我们将返回位置 1 的字符：
<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>
//打印结果e
二：charCodeAt()方法
定义和用法
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。
实例
在字符串 "Hello world!" 中，我们将返回位置 1 的字符的 Unicode 编码：
<script type="text/javascript">
var str="Hello world!"
document.write(str.charCodeAt(1))
</script>
//打印结果 101
三：concat()方法
定义和用法
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
实例
例子 1
在本例中，我们将把 concat() 中的参数连接到数组 a 中：
<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
//输出：1,2,3,4,5
例子 2
在本例中，我们创建了两个数组，然后使用 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
在本例中，我们创建了三个数组，然后使用 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 值，然后返回一个字符串。
实例
在本例中，我们将根据 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() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
实例
在本例中，我们将在 "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() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
实例
在本例中，我们将在 "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()
定义和用法
用本地特定的顺序来比较两个字符串。
实例
在本例中，我们将用本地特定排序规则对字符串数组进行排序：
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
在本例中，我们将使用全局匹配的正则表达式来检索字符串中的所有数字：
<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
在本例中，我们将执行一次全局替换，每当 "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
在本例中，我们将执行一次忽略大小写的检索：
<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/w3school/i))
</script>
输出：
6
十一：slice()方法
定义和用法
slice() 方法可从已有的数组中返回选定的元素。
实例
例子 1
在本例中，我们将创建一个新数组，然后显示从其中选取的元素：
<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
在本例中，我们将创建一个新数组，然后显示从其中选取的元素：
<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() 方法用于把一个字符串分割成字符串数组。
实例
例子 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 参数：
"hello".split("", 3) //可返回 ["h", "e", "l"]
十三：substr()方法
定义和用法
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
实例
例子 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 对象转换为一个字符串，并返回结果。
实例
在本例中，我们将把一个数字转换为字符串：
<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套微信小程序源码+微信小程序合集源码下载（免费）
话不多说，关注「前端小辣椒」公众号 ，在微信后台回复「小程序」，获取以下小程序整源码大全。