JavaScript 常用字符串方法详解（附实战代码）
前言
字符串是前端开发中最常处理的数据类型之一，展示文本、搜索匹配、分割内容、大小写转换等场景都离不开字符串方法。
今天结合实操示例，把日常高频使用的 JS 字符串 API 一次性讲清楚，每段代码附带运行效果说明，新手也能直接复制测试。
一、获取字符串长度 .length
作用
字符串自带属性，返回字符总个数，空格、数字、字母都会计入长度。
示例代码
javascript
运行
// 定义字符串
let str = ‘zishu1’;
// 获取长度并渲染到页面
document.getElementById(‘schedule’).innerHTML = str.length;
运行结果
输出：6
解析：z、i、s、h、u、1 一共 6 个字符。
二、字符串拼接 concat ()
作用
连接两个 / 多个字符串，返回拼接后的新字符串，不修改原字符串。
示例代码
javascript
运行
let str1 = ‘Xu’;
let str2 = ‘Guang’;
// 拼接
let newStr = str1.concat(str2);
document.getElementById(‘schedule’).innerHTML = newStr;
运行结果
输出：XuGuang
拓展：日常更常用 + 拼接，concat 适合批量拼接多个字符串。
三、大小写转换 toUpperCase ()
作用
将字符串所有英文字母转为大写，纯中文 / 数字不受影响。
配套方法：toLowerCase() 转小写。
示例代码
javascript
运行
function capital(){
let str = ‘zhenwo,XUGUANG,fanxing,joushi,luoxuan,wuxian,chana,kongmeng’;
// 全部转大写
let upperStr = str.toUpperCase();
document.getElementById(‘schedule’).innerHTML = upperStr;
}
capital()
运行效果
所有小写英文统一变为大写字母。
四、查找匹配 search ()
作用
检索字符串中指定内容，找到返回起始索引，找不到返回 -1；支持简单字符串和正则匹配。
示例代码
javascript
运行
function capital(){
let str = ‘zhenwo,XUGUANG,fanxing,joushi,luoxuan,wuxian,chana,kongmeng’;
// 搜索 XUGUANG 的位置
let index = str.search(‘XUGUANG’);
document.getElementById(‘schedule’).innerHTML = index;
}
capital()
五、字符串分割 split ()
作用
按照指定分隔符，把字符串切割成数组，返回全新数组，是字符串转数组最常用方法。
示例代码
javascript
运行
function capital(){
let str = ‘zhenwo,XUGUANG,fanxing,joushi,luoxuan,wuxian,chana,kongmeng’;
// 空字符串分割：每个字符单独一项
let strArr = str.split(“”);
document.getElementById(‘schedule’).innerHTML = strArr;
}
capital()
拓展用法：
split(‘,’)：按逗号分割，把人名拆分成数组
split(‘’)：拆分单个字符
六、正向查找 indexOf ()
作用
从字符串头部向后查找指定内容，返回第一次出现的索引；无匹配返回 -1。
示例代码
javascript
运行
function capital(){
let str = ‘zhenwo,XUGUANG,fanxing,joushi,luoxuan,wuxian,chana,kongmeng’;
// 获取 luoxuan 第一次出现的下标
let firstIndex = str.indexOf(‘luoxuan’);
document.getElementById(‘schedule’).innerHTML = firstIndex;
}
capital()
七、反向查找 lastIndexOf ()
作用
从字符串末尾向前查找，返回目标内容最后一次出现的索引，无匹配返回 -1。
适合处理重复文本、截取末尾内容场景。
示例代码
javascript
运行
function capital(){
let str = ‘zhenwo,XUGUANG,fanxing,joushi,luoxuan,wuxian,chana,kongmeng’;
// 获取 luoxuan 最后一次出现的下标
let lastIndex = str.lastIndexOf(‘luoxuan’);
document.getElementById(‘schedule’).innerHTML = lastIndex;
}
capital()
八、方法对比总结表
表格
方法 / 属性 核心功能 返回值 适用场景
.length 获取字符总长度 数字 限制输入字数、判断空字符串
concat() 拼接多个字符串 新字符串 批量文本拼接
toUpperCase() 字母转大写 新字符串 账号、编码统一大写
search() 检索匹配内容 索引 /-1 模糊搜索、正则匹配
split() 字符串切割为数组 数组 字符串转数组、拆分标签 / 名字
indexOf() 从头查找目标 首次索引 /-1 判断内容是否存在、正向截取
lastIndexOf() 从尾查找目标 末次索引 /-1 处理重复字符、截取后缀
九、开发小提示
所有字符串方法不会修改原字符串，都会生成新值，需要变量接收结果；
indexOf / search 找不到内容统一返回 -1，业务判断可以用 if(str.indexOf(‘xxx’) !== -1)；
分割字符串时，分隔符传空 split(“”) 会拆解每一个字符，传逗号 split(‘,’) 适合处理逗号分隔列表；
大小写转换仅作用英文字母，中文、数字、符号不会发生变化。
完整可运行整合代码
html
预览