当前位置: 首页 > news >正文

javascript中字符串处理,常用的方法汇总

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

所属专栏:前端泛海
景天的主页:景天科技苑

文章目录

  • 字符串对象的的相关方法
    • 1.获取字符串长度 length
    • 2.通过索引获取元素 charAt 不支持负下标 第几个位置的字符
    • 3.charCodeAt() 拿到字符串对应字母的ASCII的编码
    • 4.清除两侧的空白 trim()
    • 5.获取首次出现的位置 indexOf
    • 6.最后一次出现的位置 lastIndexOf
    • 7.连接字符串concat
    • 8.截取字符串 slice 只能正向截取。没有步长。加上也不报错
    • 9.截取字符串 substr
    • 10.拆分字符串 split
    • 11.大小写 toUpperCase toLowerCase
    • 12.search 匹配第一次找到的索引位置,找不到返回-1 匹配字符串要带上双斜线
    • 13.match 返回匹配的数据
    • 14.字符串替换 replace

字符串对象的的相关方法

点赞收藏关注不迷路哦,有需要时直接回来直接用。

虽然 JavaScript 有很多用处,但是处理字符串是其中最流行的一个。下面让我们深入地分析一下使用 JavaScript 操作字符串。
在 JavaScript 中, String 是对象。 String 对象并不是以字符数组的方式存储的,所以我们必须使用内建函数来操纵它们的值。这些内建函数提供了不同的方法来访问字符串变量的内容。下面我们详细看一下这些函数。
操作字符串的值是一般的开发人员必须面临的家常便饭。操作字符串的具体方式有很多,比如说从一个字符串是提取出一部分内容来,或者确定一个字符串是否包含一个特定的字符。
下面景天就 JavaScript 字符串处理相关函数做深入讲述:

1.获取字符串长度 length

var string = "to be or not to be";var res = string.length
var res = string[-1]
console.log(res)

2.通过索引获取元素 charAt 不支持负下标 第几个位置的字符

var string = "to be or not to be";
var res = string.charAt(3)
console.log(res)

在这里插入图片描述

也可以直接通过string[3]下标获取

3.charCodeAt() 拿到字符串对应字母的ASCII的编码

在这里插入图片描述
在这里插入图片描述

如果字符串中是中文,拿到的是Unicode码
在这里插入图片描述
在这里插入图片描述

字符串进行加密的时候,中文不太好加密,我们可以通过Unicode码进行数学运算,进行加密
通过String.fromCharCode(20013) 还原成中文
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4.清除两侧的空白 trim()

var res = string.trim()
console.log(string)
console.log(res)

在这里插入图片描述

在这里插入图片描述

5.获取首次出现的位置 indexOf

 /*找不到返回-1*/
var string = "to be or not to be";
var res = string.indexOf("z")
console.log(res)

在这里插入图片描述

找不到返回-1
在这里插入图片描述

找到,返回索引下标
在这里插入图片描述
在这里插入图片描述

6.最后一次出现的位置 lastIndexOf

/*找不到返回-1*/
var res = string.lastIndexOf("zzz")
console.log(res);

找到第一个字母最后出现的下标
在这里插入图片描述
在这里插入图片描述

7.连接字符串concat

var res = string.concat("d:\\","python32\\","day42");
console.log(res);

在这里插入图片描述
在这里插入图片描述

8.截取字符串 slice 只能正向截取。没有步长。加上也不报错

/* string.slice(开始值,结束值) 字符串的切片  留头舍尾  [支持逆向下标]*/
var string = "11122233e or not to be";
var res = string.slice(1,7);
var res = string.slice(-5,-1);      // to b
// var res = string.slice(-5,-10); //截取不到返回空
console.log(res,"<==1==>")

截取,取头舍尾,只能正向截取,逆向截取,获取不到
在这里插入图片描述
在这里插入图片描述

不支持逆向截取
在这里插入图片描述
在这里插入图片描述

9.截取字符串 substr

/* string.substr(开始值,截取几个) */
var string = "11122233e or not to be";
var res = string.substr(3,4)
console.log(res,"<==2==>")

在这里插入图片描述

substring是从中截取一段字符串,在组成一个新的字符串
在这里插入图片描述

截取方式:顾头不顾尾
str.substring(indexA, indexB)
以下标从零开始计数;包含indexA,不包含indexB
如果inde新A与indexB相等,则返回一个空字符串
在这里插入图片描述

其中字符串中的空格也算是一个字符串。

当有一个参数时
str.substring(indexA)
当有一个参数时,就是从indexA往后所有的字符
在这里插入图片描述

如果第二参数是负数,则从零开始计数 如果任一参数小于0或是NaN,它将被视为0。 如果indexStart大于indexEnd,那么效果和被交换一样
str.substring(indexA, indexB)
在这里插入图片描述

includes()
ES6中引入的JavaScript include()方法确定字符串是否包含您传递给该方法的字符。如果字符串包含某些字符,则该方法将返回“ true”。

如果指定的字符串不包含您要查找的字符,则includes()将返回“ false”。

10.拆分字符串 split

var string = "11122233e or not to be";
var res = string.split(" ")
console.log(res,"<==3==>")

返回数组
在这里插入图片描述

11.大小写 toUpperCase toLowerCase

var string = "11122233e Or noT tO be";
res = string.toUpperCase();
res = string.toLowerCase();
console.log(res,"<==4==>")

转换成大写
在这里插入图片描述
在这里插入图片描述

12.search 匹配第一次找到的索引位置,找不到返回-1 匹配字符串要带上双斜线

var string = "aaabbb oldaoy ccc"
var res = string.search(/oldboy/)
console.log(res,"<==5==>")

返回第一个字母出现的下标
在这里插入图片描述
在这里插入图片描述

13.match 返回匹配的数据

/* /正则表达式/修饰符 g:全局匹配 i:不区分大小写 m:多行匹配  */
var string = "我的电话是 : 13838384388 你的电话是: 13854381438"
var res = string.match(/\d{11}/);  // 匹配一个
var res = string.match(/\d{11}/g); // 匹配多个,(需要修饰符加上g)
console.log(res)
console.log(res[0])
console.log(res[1])

返回的是数组。不加g匹配第一个后,就不再匹配。res[1]没匹配到,打印出undefined
在这里插入图片描述

加上g后,全量匹配,都可以匹配到
在这里插入图片描述
在这里插入图片描述

14.字符串替换 replace

/* replace默认只替换一次 */
var string = "to be or not to be";
var res = string.replace("to","two")
console.log(res,"<==6==>")    

默认只替换一次,替换第一个
在这里插入图片描述
在这里插入图片描述

替换所有的方法

方法一:

function myreplace(string,a,b){/*找最后一个to,如果找不到返回-1如果能找到就不停的进行替换,直到-1为止,循环终止;*/while(string.lastIndexOf(a) != -1){console.log(1)string = string.replace(a,b);}return string;
}     
var string = "to be or not to be";   
var res = myreplace(string,"to","two")
console.log(res) // two be or not two be

循环替换完成,1前面的2表示循环跑了2次
在这里插入图片描述

方法二,在要被替换的字符串后面加g,表示全量替换

var string = "to be or not to be";
var res = string.replace(/to/g,"two");
console.log(res)

在这里插入图片描述

相关文章:

javascript中字符串处理,常用的方法汇总

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;前端泛海 景天的主页&#xff1a;景天科技苑 文章目录 字符串对象的的相关方法1.获取字符串长度 length2.通过索引获取元素 …...

STM32CubeMX学习笔记14 ---SPI总线

1. 简介 1.1 SPI总线介绍 SPI 是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口。是Motorola(摩托罗拉)首先在其MC68HCXX系列处理器上定义的。 SPI&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在…...

Gson(List<Object>转String 、String转List<Object>)

要在Java项目中使用Gson库&#xff0c;你需要添加相应的依赖项。以下是在Maven项目的pom.xml文件中添加Gson依赖的示例&#xff1a; <dependencies><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId>&l…...

uniapp路由跳转的方式

1. uniapp路由跳转的方式 1.1. uni.navigateTo保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面。 uni.navigateTo({url:./index/index });注意&#xff1a; &#xff08;1&#xff09;页面跳转路径有层级限制&#xff0c;不…...

使用Python模拟绘制自由落体运动过程中的抛物线

目录 一、引言 二、自由落体运动的基本原理 三、使用Python模拟自由落体运动 四、扩展功能&#xff1a;添加速度曲线和动画效果 五、总结与展望 一、引言 自由落体运动是物理学中最基础的运动形式之一&#xff0c;它描述了一个物体在仅受重力作用下的运动轨迹。在这个…...

批量爬取网站图片脚本

不分文件夹 import requests from bs4 import BeautifulSoup import os from concurrent.futures import ThreadPoolExecutordef download_image(img_url):# 检查图片后缀是否为.jpg或.jpegif img_url.lower().endswith((.jpg, .jpeg)):try:img_response requests.get(img_ur…...

scrapy 爬虫:多线程爬取去微博热搜排行榜数据信息,进入详情页面拿取第一条微博信息,保存到本地text文件、保存到excel

如果想要保存到excel中可以看我的这个爬虫 使用Scrapy 框架开启多进程爬取贝壳网数据保存到excel文件中&#xff0c;包括分页数据、详情页数据&#xff0c;新手保护期快来看&#xff01;&#xff01;仅供学习参考&#xff0c;别乱搞_爬取贝壳成交数据c端用户登录-CSDN博客 最终…...

网络、UDP编程

1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据报、流式&#xff09; 网络层 …...

VSCode安装与使用

1、下载地址&#xff1a;Documentation for Visual Studio Code 在 VS Code 中使用 Python - 知乎 (zhihu.com) 自动补全和智能感知检测、调试和单元测试在Python环境(包括虚拟环境和 conda 环境)之间轻松切换 在 VS Code 中安装插件非常的简单&#xff0c;只需要打开 VS Code…...

进程和线程的区别与联系

进程和线程是计算机系统中两个重要的概念&#xff0c;它们在操作系统中扮演着不同的角色&#xff0c;并有着不同的特点和用途。以下是详细信息&#xff1a; 进程。进程是操作系统中资源分配的基本单位&#xff0c;它包括程序、数据和进程控制块。每个进程都有自己的地址空间&a…...

6、Redis-KV设计、全局命令和安全性

目录 一、value设计 二、Key设计 三、全局命令——针对所有key 四、安全性 一、value设计 ①是否需要排序&#xff1f;需要&#xff1a;Zset ②需要缓存的数据是单个值还是多个值&#xff1f; 单个值&#xff1a;简单值---String&#xff1b;对象值---Hash多个值&#x…...

python之海龟绘图

海龟绘图&#xff08;turtle&#xff09;是一个Python内置的绘图库&#xff0c;也被称为“Turtle Graphics”或简称“Turtles”。它采用了一种有趣的绘图方式&#xff0c;模拟一只小海龟在屏幕上爬行&#xff0c;而小海龟爬行的路径就形成了绘制的图形。这种绘图方式最初源自20…...

Java实战:Spring Boot 实现异步记录复杂日志

日志记录是软件开发中非常重要的一环&#xff0c;它可以帮助我们快速定位问题、监控程序运行状态等。在 Spring Boot 应用中&#xff0c;异步记录日志是一种常见的需求。本文将详细介绍如何在 Spring Boot 中实现异步记录复杂日志&#xff0c;包括异步日志的基本原理、实现方式…...

“色狼”用英语怎么说?柯桥日常英语,成人英语口语学习

最近有粉丝问我"色狼"英文翻译是啥 首先声明不是"colour wolf"哈 关于“色狼”的英文表达有很多 快和C姐一起来看看吧&#xff01; 1.pervert 这个单词的意思是变态、色狼 是对性变态者最直观的描述 He is such a pervert&#xff01; I saw him lo…...

Docker前后端项目部署

目录 一、搭建项目部署的局域网 二、redis安装 三、MySQL安装 四、若依后端项目搭建 4.1 使用Dockerfile自定义镜像 五、若依前端项目搭建 一、介绍前后端项目 一张图带你看懂ruoyi的前后端项目部署 得出结论&#xff1a;需要4台服务器&#xff0c;都处于同一个局域网中…...

如何快速的搭建一个小程序

要快速搭建一个小程序&#xff0c;你可以按照以下步骤进行&#xff1a; 明确目标和需求&#xff1a;在开始搭建小程序之前&#xff0c;首先明确你的小程序的主要功能、目标用户以及希望实现的业务需求。这将帮助你更好地规划和设计小程序。选择小程序平台&#xff1a;根据你的…...

STM32自学☞AD多通道

涉及到的硬件有&#xff1a;光敏传感器&#xff0c;热敏传感器&#xff0c;红外对射传感器&#xff0c;电位器 通过adc将他们采集的模拟信号转换为数值 ad.c文件 #include "stm32f10x.h" #include "stm32f10x_adc.h" #include "ad.h" #inc…...

微服务之商城系统

一、商城系统建立之前的一些配置 1、nacos Nacos是一个功能丰富的开源平台&#xff0c;用于配置管理、服务发现和注册、健康检查等&#xff0c;帮助构建和管理分布式系统。 在linux上安装nacos容器的命令&#xff1a; docker run --name nacos-standalone -e MODEstandalone …...

安卓玩机工具推荐----高通芯片9008端口读写分区 备份分区 恢复分区 制作线刷包 工具操作解析

上期解析了下adb端口备份分区的有关操作 安卓玩机工具推荐----ADB状态读写分区 备份分区 恢复分区 查看分区号 工具操作解析 在以往的博文中对于高通芯片机型的分区读写已经分享了很多。相关类似博文 安卓备份分区----手动查询安卓系统分区信息 导出系统分区的一些基本操作 …...

全量知识系统问题及SmartChat给出的答复 之16 币圈生态链和行为模式

Q.42 币圈生态链和行为模式 我认为&#xff0c;上面和“币”有关的一系列概念和技术&#xff0c;按设计模式的划分 &#xff0c;整体应该都属于行为模式&#xff0c;而且应该囊括行为模式的所有各个方面。 而行为又可以按照三种不同的导向&#xff08;以目的或用途为导向、过…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...