JS操作字符串的一些常见内置方法

 更新时间:2023年11月10日 15:39:39   作者:暴怒的代码  
这篇文章主要给大家介绍了关于JS操作字符串的一些常见内置方法,JavaScript中有许多常用的数组和字符串操作函数,文中通过代码介绍的非常详细,需要的朋友可以参考下

一:前言

在前端项目开发中,我们经常会涉及到处理字符串的各种操作。但是不必担心,JavaScript是很贴心的,给了我们很多内置的方法。这让我们的开发成本大大降低,不必去考虑其内部的实现方法(最好还是有所了解)。拿来会用即可。接下来就让我们开始分析一些比较常用的方法吧!

注意:字符串和数组一样,按照索引来排列。并且所有字符串常用方法, 都不会改变原始字符串, 都是以返回值的形式出现结果 。

二:常见的内置方法

// 转换为字符串
// 方法1
var num=110;
var n=num.toString();    //"110"

// 方法2
var num=111;
var n=String(num);       //"111"

// 方法3
var num=112;
var n="" + num;          //"112"

1、charAt与charCodeAt

1) charAt

●作用:charAt() 是找到字符串中指定索引位置的内容返回

●语法:字符串.charAt(索引)

●返回值:该索引位置对应的字符

○如果有该索引位置, 那么就是该索引位置的字符

○如果没有该索引位置, 那么就是 空字符串('')

var str = 'hello world'
//使用charAt找到字符串中的某一个内容
var index = str.charAt(2)
console.log(index)// l
//查找索引为13的内容,因为没有返回是一共空字符串var index1 = str.charAt(13)
console.log(index1);// ''

2) charCodeAt

●作用:charCodeAt() 就是返回对应索引位置的 unicode 编码

●语法:字符串.charCodeAt(索引)

●返回值:该索引位置的对应字符的 编码(十进制)

var str = ' hello world'
1/使用charAt找到字符串中的某一个内容var index = str.charCodeAt(4)
console.log(index)// 111
// 因为0在 unicode 对照表里面存储的是 111,所以就会返回111

2、indexOf与lastIndexOf

1) indexOf

●作用:indexOf 就是按照字符找到对应的索引

●语法:字符串.indexOf(要查找的字符,开始索引)

●返回值:

○如果有该字符内容, 那么就是该字符的索引位置

○如果没有该字符内容, 就是 -1

var str =  'hello world'
//使用indexOf 找到字符串中的某一个内容
var index = str.indexOf('l',0)
console.log(index)// 2返回第一个找到的内容的下标后面的就不查找了
var index1 = str.indexof('w',3)
console.log(index1);116不管从那个索引开始,索引的位置不变
var index2 = str.indexOf('w',7)
console.log(index2);// -1从索引7开始查找没有找到返回-1

2) lastIndexOf

●作用:lastIndexOf 是从后向前检测该字符在字符串内的索引位置

●语法:字符串.indexOf(要查找的字符,开始索引)

●返回值:

○如果有该字符内容, 那么就是该字符的索引位置

○如果没有该字符内容, 就是 -1

var str = 'hello world'
//使用lastIndexOf找到字符串中的某一个内容
var index = str.lastIndexOf('l')
console.log(index)//9返回第一个找到的内容的下标后面的就不查找了,索引的位置不变
var index = str.lastIndexOf('l',8)
console.log(index)//3 返回第一个找到的内容的下标后面的就不查找了,索引的位置不变
var index = str.lastIndexof('w',5)
console.log(index)//-1 从后开始查找,开始的索引是5但是前面没有找到w返回-1

3、substring与substr

1) substring

●作用:substring 是用来截取字符串使用的

●语法: substring(从哪个索引开始,到哪个索引截止),包含开始索引,不包含结束索引

●返回值:返回截取到的内容

var str = 'hello world'
//使用substring截取字符串中的某一个内容
var res = str. substring(2,8)
console.log(res); //llo wo

2) substr

●作用:substr 也是用来截取字符串的

●语法:substr(从哪个索引开始,截取多少个)

●返回值:截取到的内容

var str = 'hello world'
//使用substr截取字符串中的某一个内容
var res = str.substr(2,7)//从索引2开始,截取7个
console.log(res);//llo wor

○这个方法和 substring 不一样的是,第二个参数是截取多少个

4、toLowerCase 和 toUpperCase

●作用:这两个方法分别是用来给字母格式的字符串转成 小写字母 和 大写字母 的

●语法:

○字符串.toLowerCase()

○字符串.toUpperCase()

var str = 'hello world'
//使用toUppercase转换成大写
var upper = str.toUppercase(console.log(upper)// HELLO WORLD
//使用 toLowercase转换成小写
var lower = upper.toLowerCase()console.log(lower) // hello world

5、slice

●作用:截取字符串

●语法:字符串.slice(起始索引,结束索引)

○包含开始的索引对应的内容,不包含结束索引对应的内容

○结束索引不写就直接截取到末尾

●返回值:截取出来的字符串

var str = ' hello world'
/使用slice截取字符串
var res = str.slice(1,4) //ell
console.log(res);
//没有结束的索引直接截取到末尾
var res1 = str.slice(1)//ello world
console.log(res1);

6、replace

●作用:用指定的内容替换掉字符串中的内容

●语法:字符串.repalce(被替换的内容,要替换的内容)

○被替换内容 => 换下内容

○要替换内容 => 换上内容

●返回值:替换好的字符串

●注意:内容只能被替换一次,从索引0 的位置开始

var str = 'hello world'
//使用replace替换字符串中的内容
var res -str.replace('l','M')
console.log(res);// heMlo world
console.log(str); // hello world

7、split

●作用:按照切割符号, 把字符串切割开, 放在一个数组里面.

●语法:字符串.split('指定的切割符')

○切割符可以不传递,就会和整体当做一个字符串

○('')空字符串会一位一位的切割

○(' ') 字符串中有空格 会按照原字符串中的空格切割

●返回值:一个用指定切割符切割好的数组

//使用split切割成一个数组var res = str.splitO
console.log(res);//E'hello world']
var res1 = str.split('')
console.log(res1);//['h', 'e', 'l','l','o',' ','w','o','r', 'l', 'd']
var res2 = str.splitC(' ')
console.log(res2);//L'hello', 'world']

8、concat

●作用:字符串拼接也可以说是字符串合并

●语法:字符串.concat(字符串)

●返回值:拼接后的字符串

var str = 'hello world '
var str1 = 'ni hao'
//使用concat 切割成一个数组
var res = str.concat( 'ni hao' )
console.log(res); // hello world ni hao
var res1 = str.concat(str1)
console.log(res1); // hello world ni hao

9、trim

●作用:取出字符串头尾的空白内容

●语法:字符串.trim()

●返回值:去除空白内容以后的字符串

var str = ' hello world '
//使用trim切割成一个数组
var res = str.trim()
console.log(res); // hello world

10、trimStart / trimLeft

●作用:去除字符串头部的空白内容

●语法:

○字符串.trimStart()

○字符串.trimLeft()

●返回值:去除空白内容以后的字符串

var str = ' hello world '
//使用trimStart后者trimLeft去除头部的空白内容
var res = str.trimstart()
console.log(res);//hello world
var res1 = str.trimLeft()
console.log(res1); //hello world

11、trimEnd / trimRight

●作用:去除字符串尾部的空白内容

●语法:

○字符串.trimtrimEnd()

○字符串.trimRight()

●返回值:去除空白内容以后的字符串

var str = ' hello world '
//使用trimEnd后者trimRight去除尾部的空白内容
var res = str.trimEnd()
console.log(res); // hello world
var res1 = str.trimRight(
console.log(res1);// hello world

12、search()

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

●语法:

○字符串.search()

●返回值:如果没有找到任何匹配的子串,则返回 -1。

var str="abc DEF!" // 要执行忽略大小写的检索,请追加标志 i。
console.log(str.search(/DEF/))//4

三:结尾

以上就是在JavaScript处理字符串中比较常用到的一些方法,虽然有些不同方法处理结果是相同的,但是在使用性能等方面也各有优劣。各位小伙伴可以根据自己实际的开发需求自行选择。

到此这篇关于JS操作字符串的一些常见内置方法的文章就介绍到这了,更多相关JS操作字符串方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现弹出窗口效果

    JavaScript实现弹出窗口效果

    这篇文章主要为大家详细介绍了JavaScript实现弹出窗口效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 详解基于webpack&gettext的前端多语言方案

    详解基于webpack&gettext的前端多语言方案

    这篇文章主要介绍了详解基于webpack&gettext的前端多语言方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JavaScript实现单例模式的六种方式

    JavaScript实现单例模式的六种方式

    单例模式确保一个类只有一个实例,并提供全局访问点,文章介绍了JavaScript中实现单例模式的几种常见方式,包括对象字面量、闭包实现、ES6类实现、改进的class实现、ES6模块模式的单例以及ES6模块本身就是单例,每种方式都有其特点和适用场景,需要的朋友可以参考下
    2025-12-12
  • 微信小程序页面缩放式侧滑效果的实现代码

    微信小程序页面缩放式侧滑效果的实现代码

    这篇文章主要介绍了微信小程序页面缩放式侧滑效果的实现代码,实现原理就是通过点击按钮,往需要动画的div中添加或移除拥有动画效果的class。具体实例代码大家跟随小编一起通过本文学习吧
    2018-11-11
  • js浏览器html5表单验证

    js浏览器html5表单验证

    这篇文章主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript 模块化语法 import、export示例详解

    JavaScript 模块化语法 import、export示例详解

    ES6 模块化 (import / export) 是 JavaScript 官方推荐的模块化方案,解决了 代码复用、作用域管理、依赖管理 等问题,本文给大家介绍了JavaScript 模块化语法 import、export示例代码,感兴趣的朋友一起看看吧
    2025-04-04
  • 不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果

    不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果

    不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果...
    2007-08-08
  • 老生常谈document.ready和window.onload

    老生常谈document.ready和window.onload

    这篇文章主要介绍了document.ready和window.onload的相关知识,包括document.ready和window.onload的区别,要使用document.ready()或者document.onload()的原因分析,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • Js四则运算函数代码

    Js四则运算函数代码

    javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果
    2012-07-07
  • 微信小程序学习总结(一)项目创建与目录结构分析

    微信小程序学习总结(一)项目创建与目录结构分析

    这篇文章主要介绍了微信小程序学习总结(一)项目创建与目录结构,总结分析了微信小程序项目创建、配置方法以及目录结构、文件功能,需要的朋友可以参考下
    2020-06-06

最新评论