0

0

JS截取与分割字符串常用技巧详解

怪我咯

怪我咯

发布时间:2017-07-07 17:33:07

|

1770人浏览过

|

来源于php中文网

原创

这篇文章主要介绍了js截取与分割字符串常用技巧,以实例形式分析你了javascript针对字符串的截取与分割常用函数的定义、功能及使用技巧,并补充分析了substr和substring方法的区别,需要的朋友可以参考下

本文实例讲述了JS截取与分割字符串的常用方法。分享给大家供大家参考,具体如下:

JS截取字符串可使用 substring()或者slice()
 
函数:substring()

定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。

功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)

例子:

var src="images/off_1.png";
alert(src.substring(7,10));
//弹出值为:off

函数:substr()

定义:substr(start,length)表示从start位置开始,截取length长度的字符串。

功能:字符串截取

例子:

var src="images/off_1.png";
alert(src.substr(7,3));
//弹出值为:off

函数:split()

功能:使用一个指定的分隔符把一个字符串分割存储到数组

例子:

str="jpg|bmp|gif|ico|png";
arr=theString.split("|");
//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组

函数:John()

功能:使用您选择的分隔符将一个数组合并为一个字符串

例子:

var delimitedString=myArray.join(delimiter);
var myList=new Array("jpg","bmp","gif","ico","png");
var portableList=myList.join("|");
//结果是jpg|bmp|gif|ico|png

函数:indexOf()

功能:返回字符串中匹配子串的第一个字符的下标

var myString="JavaScript";
var w=myString.indexOf("v");w will be 2
var x=myString.indexOf("S");x will be 4
var y=myString.indexOf("Script");y will also be 4
var z=myString.indexOf("key");z will be -1

函数:lastIndexOf()

定义:lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值(与indexOf相反)

功能:返回字符串索引值

例子:

var src="images/off_1.png";
alert(src.lastIndexOf('/'));
alert(src.lastIndexOf('g'));
//弹出值依次为:6,15

补充:substr 和 substring方法的区别

substr 方法

返回一个从指定位置开始的指定长度的子字符串。

stringvar.substr(start [, length ])

参数

Onlook
Onlook

专为前端设计师和开发者打造的视觉编辑工具

下载

stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

说明

如果 length 为 0 或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到 stringvar 的最后。

示例

下面的示例演示了substr 方法的用法。

function SubstrDemo(){
  var s, ss;        // 声明变量。
  var s = "The rain in Spain falls mainly in the plain.";
  ss = s.substr(12, 5); // 获取子字符串。
  return(ss);        // 返回 "Spain"。
}

substring 方法

返回位于 String 对象中指定位置的子字符串。

strVariable.substring(start, end)
"String Literal".substring(start, end)

参数

start

指明子字符串的起始位置,该索引从 0 开始起算。

end

指明子字符串的结束位置,该索引从 0 开始起算。

说明

substring 方法将返回一个包含从 start 到最后(不包含 end )的子字符串的字符串。

substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如, strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。

如果 start 或 end 为 NaN 或者负数,那么将其替换为0。

子字符串的长度等于 start 和 end 之差的绝对值。例如,在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。

示例

下面的示例演示了 substring 方法的用法。

function SubstringDemo(){
  var ss; // 声明变量。
  var s = "The rain in Spain falls mainly in the plain..";
  ss = s.substring(12, 17); // 取子字符串。
  return(ss); // 返回子字符串。
}

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 序列化
Python 序列化

本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

91

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

27

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

11

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

5

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

5

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

55

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

27

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号