前端常用的21种字符串方法

最新推荐文章于 2024-11-10 22:45:39 发布

2401_84093310

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量602

点赞数 18

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84093310/article/details/138052272

版权

程序员专栏收录该内容

271 篇文章 1 订阅

订阅专栏

定义和用法

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

实例

例子 1

在本例中，我们将使用 “W3School” 替换字符串中的 “Microsoft”：

输出：

Visit W3School!

例子 2

在本例中，我们将执行一次全局替换，每当 “Microsoft” 被找到，它就被替换为 “W3School”：

输出：

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”：

输出：

在下面的例子中，无法检索到 w3school（因为 search() 对大小写敏感）。

输出：

-1

例子 2

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

输出：

十一：slice()方法

定义和用法

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

实例

例子 1

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

输出：

George,John,Thomas

John,Thomas

George,John,Thomas

例子 2

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

输出：

George,John,Thomas,James,Adrew,Martin

Thomas,James

George,John,Thomas,James,Adrew,Martin

十二：split()方法

定义和用法

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

实例

例子 1

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

输出：

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() 从字符串中提取一些字符：

输出：

lo world!

例子 2

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

输出：

lo worl

十四：substring()

定义和用法

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

实例

例子 1

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

输出：

lo world!

例子 2

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

输出：

lo w

十五：toLocaleLowerCase()

定义和用法

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

实例

在本例中，“Hello world!” 将以小写字母来显示：

十六：toLocaleUpperCase()

定义和用法

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

实例

在本例中，“Hello world!” 将以大写字母来显示：

十七：toLowerCase()

定义和用法

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

实例

在本例中，“Hello world!” 将以小写字母来显示：

十八：toString()

定义和用法

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

实例

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

输出：

1337

十九：toUpperCase()

定义和用法

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

实例

在本例中，“Hello world!” 将以大写字母来显示：

二十：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 对象的原始值:

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

❤️ 谢谢支持，喜欢的话别忘了关注、点赞哦。

gm,‘’);

}

function myFunction() {

var str = myTrim(" Runoob ");

alert(str);

}

输出结果

Runoob

二十一：valueOf()

定义和用法

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

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

实例

返回 String 对象的原始值:

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

[外链图片转存中…(img-SlB6M0HO-1713720580719)]

[外链图片转存中…(img-rvKOipiS-1713720580719)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-OaUSEUqQ-1713720580720)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-MJgsPxnH-1713720580720)]

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

❤️ 谢谢支持，喜欢的话别忘了关注、点赞哦。