前端开发常用的21个字符串方法

前端开发常用的21个字符串方法

总结一下前端开发常用的字符串方法。

1、charAt()方法

定义和用法

charAt() 方法可返回指定位置的字符。

请注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串。

实例

在字符串 “Hello world!” 中,我们将返回位置 1 的字符:

var str="Hello world!"
console.log(str.charAt(1))
//打印结果e

2、charCodeAt()方法

定义和用法

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 – 65535 之间的整数。

charCodeAt()方法与 charAt()方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。

实例

在字符串 “Hello world!” 中,我们将返回位置 1 的字符的 Unicode 编码:

var str="Hello world!"
console.log(str.charCodeAt(1))
//打印结果 101

3、concat()方法

定义和用法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

实例

例子 1:

在本例中,我们将把 concat() 中的参数连接到数组 a 中:

var a = [1,2,3];
console.log(a.concat(4,5));
//输出:1,2,3,4,5

例子 2:

在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

var arr = new Array(3)
arr[0] = "张三"
arr[1] = "李四"
arr[2] = "王五"

var arr2 = new Array(3)
arr2[0] = "赵六"
arr2[1] = "孙七"
arr2[2] = "周八"

console.log(arr.concat(arr2))
//输出:张三,李四,王五,赵六,孙七,周八

例子 3:

在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

var arr = new Array(3)
arr[0] = "张三"
arr[1] = "李四"
arr[2] = "王五"

var arr2 = new Array(3)
arr2[0] = "赵六"
arr2[1] = "孙七"
arr2[2] = "周八"

var arr3 = new Array(2)
arr3[0] = "吴九"
arr3[1] = "郑十"

console.log(arr.concat(arr2,arr3))
//输出:张三,李四,王五,赵六,孙七,周八,吴九,郑十

4、fromCharCode()

定义和用法

fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。

实例

在本例中,我们将根据 Unicode 来输出 “HELLO” 和 “ABC”:

console.log(String.fromCharCode(72,69,76,76,79))
console.log("<br />")
console.log(String.fromCharCode(65,66,67))
//以上代码的输出:HELLO  ABC

5、indexOf()

定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

实例

在本例中,我们将在 “Hello world!” 字符串内进行不同的检索:

var str="Hello world!"
console.log(str.indexOf("Hello") + "<br />")
console.log(str.indexOf("World") + "<br />")
console.log(str.indexOf("world"))

以上代码的输出:

0
-1
6

6、lastIndexOf()

定义和用法

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

实例

在本例中,我们将在 “Hello world!” 字符串内进行不同的检索:

var str="Hello world!"
console.log(str.lastIndexOf("Hello") + "<br />")
console.log(str.lastIndexOf("World") + "<br />")
console.log(str.lastIndexOf("world"))

以上代码的输出:

0
-1
6

7、localeCompare()

定义和用法

localeCompare()方法用本地特定的顺序来比较两个字符串。

实例

在本例中,我们将用本地特定排序规则对字符串数组进行排序:

var str;
str.sort (function(a,b){return a.localeCompare(b)})

8、match()

定义和用法

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

该方法类似 indexOf()lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

实例

例子 1:

在本例中,我们将在 “Hello world!” 中进行不同的检索:

var str="Hello world!"
console.log(str.match("world") + "<br />")
console.log(str.match("World") + "<br />")
console.log(str.match("worlld") + "<br />")
console.log(str.match("world!"))

以上代码输出:

world
null
null
world!

例子 2:

在本例中,我们将使用全局匹配的正则表达式来检索字符串中的所有数字。

var str="1 plus 2 equal 3"
console.log(str.match(/\d+/g))
// 1,2,3

9、replace()

定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

实例

例子 1

在本例中,我们将使用 “mybj123.com” 替换字符串中的 “Microsoft”:

var str="Visit Microsoft!"
console.log(str.replace(/Microsoft/, "mybj123.com"))
// Visit mybj123.com!

例子 2

在本例中,我们将执行一次全局替换,每当 “Microsoft” 被找到,它就被替换为 “mybj123.com”:

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."

console.log(str.replace(/Microsoft/g, "mybj123.com"))

以上代码输出:

Welcome to mybj123.com! We are proud to announce that mybj123.com
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);}
  );

10、search()

定义和用法

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

实例

例子 1

在本例中,我们将检索 “mybj123.com”:

var str="Visit mybj123.com!"
console.log(str.search(/mybj123.com/))
// 6

在下面的例子中,无法检索到 mybj123.com(因为 search() 对大小写敏感)。

var str="Visit mybj123.com!"
console.log(str.search(/Mybj123.com/))
// -1

例子 2

在本例中,我们将执行一次忽略大小写的检索:

var str="Visit mybj123.com!"
console.log(str.search(/Mybj123.com/i))
// 6

11、slice()方法

定义和用法

slice() 方法可从已有的数组中返回选定的元素。

实例

例子 1

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

var arr = new Array(3)
arr[0] = "张三"
arr[1] = "李四"
arr[2] = "王五"

console.log(arr + "<br />")
console.log(arr.slice(1) + "<br />")
console.log(arr)
// 张三,李四,王五
// 李四,王五
// 张三,李四,王五

例子 2

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

var arr = new Array(6)
arr[0] = "张三"
arr[1] = "李四"
arr[2] = "王五"
arr[3] = "赵六"
arr[4] = "孙七"
arr[5] = "周八"

console.log(arr + "<br />")
console.log(arr.slice(2,4) + "<br />")
console.log(arr)

// 张三,李四,王五,赵六,孙七,周八
// 王五,赵六
// 张三,李四,王五,赵六,孙七,周八

12、split()方法

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

实例

例子 1

在本例中,我们将按照不同的方式来分割字符串:

var str="How are you doing today?"

console.log(str.split(" ") + "<br />")
console.log(str.split("") + "<br />")
console.log(str.split(" ",3))

输出:

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"]

13、substr()方法

定义和用法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

实例

例子 1

在本例中,我们将使用 substr() 从字符串中提取一些字符:

var str="Hello world!"
console.log(str.substr(3))
// lo world!

例子 2

在本例中,我们将使用 substr() 从字符串中提取一些字符:

var str="Hello world!"
console.log(str.substr(3,7))
// lo worl

14、substring()

定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

实例

例子 1

在本例中,我们将使用 substring() 从字符串中提取一些字符:

var str="Hello world!"
console.log(str.substring(3))
// lo world!

例子 2

在本例中,我们将使用 substring() 从字符串中提取一些字符:

var str="Hello world!"
console.log(str.substring(3,7))
// lo w

15、toLocaleLowerCase()

定义和用法

toLocaleLowerCase() 方法用于把字符串转换为小写。

实例

在本例中,”Hello world!” 将以小写字母来显示:

var str="Hello World!"
console.log(str.toLocaleLowerCase())
// hello world!

16、toLocaleUpperCase()

定义和用法

toLocaleUpperCase() 方法用于把字符串转换为大写。

实例

在本例中,”Hello world!” 将以大写字母来显示:

var str="Hello World!"
console.log(str.toLocaleUpperCase())

17、toLowerCase()

定义和用法

toLowerCase() 方法用于把字符串转换为小写。

实例

在本例中,”Hello world!” 将以小写字母来显示:

var str="Hello World!"
console.log(str.toLowerCase())

18、toString()

定义和用法

toString() 方法可把一个 Number 对象转换为一个字符串,并返回结果。

实例

在本例中,我们将把一个数字转换为字符串:

var number = new Number(1337);
console.log(number.toString());

19、toUpperCase()

定义和用法

toUpperCase() 方法用于把字符串转换为大写。

实例

在本例中,”Hello world!” 将以大写字母来显示:

var str="Hello World!"
console.log(str.toUpperCase())

20、trim()

定义和用法

trim() 方法用于删除字符串的头尾空白符,空白符包括:空格、制表符 tab、换行符等其他空白符等。

trim() 方法不会改变原始字符串。

trim() 方法不适用于 null, undefined, Number 类型。

实例

function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}

function myFunction() {
  var str = myTrim("        mybj        ");
  console.log(str);
}
myFunction()
// mybj

21、valueOf()

定义和用法

valueOf() 方法可返回 String 对象的原始值。

注意:valueOf() 方法通常由 JavaScript 在后台自动进行调用,而不是显式地处于代码中。

实例

返回 String 对象的原始值:

var str="Hello world!";
console.log(str.valueOf());
// Hello world!

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 前端开发常用的21个字符串方法

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们