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预览JS字符串方法测试结尾 字符串处理是 JS 基础重中之重表单校验、文本解析、搜索功能全都依赖这些方法。建议复制上方完整 HTML 文件注释切换不同方法逐行调试直观看到每种 API 的输出差异快速吃透字符串操作。