JavaScript字符串模板大全：从基础属性到高级操作
什么是字符串？
字符串是JavaScript中用于存储和操作文本的数据类型。它由一系列字符组成，可以用单引号（'）、双引号（"）或反引号（`）包裹。字符串在JavaScript中是不可变的（immutable），这意味着一旦创建，就不能直接修改内容，但可以通过各种方法返回新的字符串。
let str1 = 'Hello World'; // 单引号
let str2 = "JavaScript编程"; // 双引号
let str3 = `模板字符串`; // 反引号（ES6）
字符串可以包含：
-
字母：A-Z, a-z
-
数字：0-9
-
符号：@, #, $, %, &, *等
-
空白：空格、制表符（\t）、换行符（\n）等
字符串基础属性
length - 获取字符串长度
length属性返回字符串中字符的个数，包括空格和特殊字符。
let str1 = 'Hello, JavaScript!';
console.log('字符串长度：', str1.length); // 18
let str2 = '';
console.log('空字符串长度：', str2.length); // 0
let str3 = ' 空格测试 ';
console.log('带空格长度：', str3.length); // 6（包括首尾空格）
// 实际应用：验证用户输入长度
function validateUsername(username) {
if (username.length < 3) {
return '用户名至少需要3个字符';
}
if (username.length > 20) {
return '用户名不能超过20个字符';
}
return '用户名有效';
}
console.log(validateUsername('张')); // 用户名至少需要3个字符
console.log(validateUsername('张三丰')); // 用户名有效
console.log(validateUsername('这是一个非常长的用户名测试')); // 用户名不能超过20个字符
字符访问方法
1. charAt() - 获取指定位置的字符
返回字符串中指定索引位置的字符，索引从0开始。如果索引超出范围，返回空字符串。
let text = 'TpointTech';
console.log('索引4的字符：', text.charAt(4)); // n
console.log('索引0的字符：', text.charAt(0)); // T
console.log('之后一个字符：', text.charAt(text.length - 1)); // h
console.log('索引20的字符：', text.charAt(20)); // ''（空字符串）
// 遍历字符串
for (let i = 0; i < text.length; i++) {
console.log(`位置${i}: ${text.charAt(i)}`);
}
2. charCodeAt() - 获取字符的Unicode编码
返回指定位置字符的Unicode编码（0-65535之间的整数）。
let text = 'TpointTech';
console.log('索引1的ASCII码：', text.charCodeAt(1)); // 112（p的ASCII码）
console.log('索引0的ASCII码：', text.charCodeAt(0)); // 84（T的ASCII码）
console.log('之后一个字符的ASCII码：', text.charCodeAt(text.length - 1)); // 104（h的ASCII码）
// 实际应用：字符编码转换
function isUppercase(char) {
if (char.length !== 1) return false;
let code = char.charCodeAt(0);
return code >= 65 && code <= 90; // A-Z的ASCII范围
}
console.log(isUppercase('A')); // true
console.log(isUppercase('z')); // false
3. at() - 支持负索引的字符访问（ES2022）
at()方法允许使用正数和负数索引访问字符，负数从末尾开始计数。
let text = 'TpointTech';
console.log('索引-1：', text.at(-1)); // h（之后一个）
console.log('索引-5：', text.at(-5)); // t（倒数第5个）
console.log('索引3：', text.at(3)); // i
console.log('索引10：', text.at(10)); // undefined（超出范围）
// 传统方式 vs at()方法
let lastChar1 = text[text.length - 1]; // 传统方式
let lastChar2 = text.at(-1); // 现在方式（更简洁）
console.log(lastChar1, lastChar2); // h h
个人经验：at()方法让访问字符串末尾的元素变得非常直观，特别是在处理不定长字符串时。如果你的项目环境支持ES2022，推荐使用这个优雅的语法。
提取子串方法
4. slice() - 提取子串（推荐）
提取字符串的一部分并返回新字符串，支持负数索引。
let text = 'JavaScript Programming';
// slice(start, end) - 从start到end（不包括end）
console.log('提取0-10：', text.slice(0, 10)); // JavaScript
console.log('提取11到结束：', text.slice(11)); // Programming
// 负数索引
console.log('之后5个字符：', text.slice(-5)); // mming
console.log('从开头排除之后10个：', text.slice(0, -10)); // JavaScript P
// 实际应用：获取文件扩展名
function getFileExtension(filename) {
let dotIndex = filename.lastIndexOf('.');
if (dotIndex === -1) return '';
return filename.slice(dotIndex + 1);
}
console.log(getFileExtension('document.pdf')); // pdf
console.log(getFileExtension('image.jpg')); // jpg
console.log(getFileExtension('archive.tar.gz')); // gz
5. substring() - 提取子串（不支持负数）
与slice类似，但不支持负数索引，且会自动交换参数顺序。
let text = 'TpointTech';
// 基本用法
console.log('substring(0,4)：', text.substring(0, 4)); // Tpoi
console.log('substring(4)：', text.substring(4)); // ntTech
// 自动交换参数：如果start > end，会自动交换
console.log('substring(4,0)：', text.substring(4, 0)); // Tpoi（等同于substring(0,4)）
// 负数处理：负数被视为0
console.log('substring(-5,4)：', text.substring(-5, 4)); // Tpoi（-5视为0）
// slice和substring的对比
let = 'Hello World';
console.log('slice(6,0)：', .slice(6, 0)); // ''（空字符串）
console.log('substring(6,0)：', .substring(6, 0)); // 'Hello'（自动交换）
个人建议：在大多数情况下，我倾向于使用slice()，因为它支持负数索引且行为更可预测。只有在需要自动参数交换这个特性时才考虑substring()。
6. substr() - 已弃用的提取方法
从指定位置开始提取指定长度的字符。注意：这个方法已经弃用，建议使用slice()代替。
let text = 'TpointTech';
// substr(start, length)
console.log('substr(4,6)：', text.substr(4, 6)); // ntTech
console.log('substr(0,4)：', text.substr(0, 4)); // Tpoi
console.log('substr(-6,6)：', text.substr(-6, 6)); // ntTech
// 现在替代方案：使用slice()
console.log('slice(4,10)：', text.slice(4, 10)); // ntTech
大小写转换方法
7. toUpperCase() - 转换为大写
将字符串中的所有字母转换为大写。
let text1 = 'hello';
console.log('大写转换：', text1.toUpperCase()); // HELLO
let text2 = 'tpointtech users';
console.log('大写转换：', text2.toUpperCase()); // TPOINTTECH USERS
// 实际应用：不区分大小写的比较
function compareCaseInsensitive(str1, str2) {
return str1.toUpperCase() === str2.toUpperCase();
}
console.log(compareCaseInsensitive('hello', 'HELLO')); // true
console.log(compareCaseInsensitive('Java', 'JA')); // true
console.log(compareCaseInsensitive('test', 'TEST')); // true
8. toLowerCase() - 转换为小写
将字符串中的所有字母转换为小写。
let text1 = 'HELLO';
console.log('小写转换：', text1.toLowerCase()); // hello
let text2 = 'JavaScript';
console.log('小写转换：', text2.toLowerCase()); // javascript
// 实际应用：标准化用户输入
function normalizeInput(input) {
return input.trim().toLowerCase();
}
let searchTerm = ' JavaScript ';
let normalized = normalizeInput(searchTerm);
console.log(normalized); // 'javascript'
字符串拼接方法
9. concat() - 拼接字符串
将一个或多个字符串与原字符串拼接，返回新字符串。
let str1 = 'Hello';
let str2 = 'TpointTech';
let str3 = 'Users';
console.log('拼接两个字符串：', str1.concat(' ', str2)); // Hello TpointTech
console.log('拼接多个字符串：', str1.concat(' ', str2, ' ', str3)); // Hello TpointTech Users
// 空字符串拼接
let empty = '';
console.log('拼接空字符串：', str1.concat(empty)); // Hello
// 对比：+运算符和模板字符串（更常用）
console.log(str1 + ' ' + str2); // Hello TpointTech
console.log(`${str1} ${str2}`); // Hello TpointTech（推荐）
个人建议：虽然concat()方法可用，但在日常开发中，我更倾向于使用模板字符串（${}）进行字符串拼接，代码更清晰易读。
空白处理方法
10. trim() - 去除两端空白
移除字符串首尾的空白字符（空格、制表符、换行符等）。
let text = ' Hello World ';
console.log(`原始字符串："${text}"`);
console.log(`trim后："${text.trim()}"`); // "Hello World"
let spaced = ' JavaScript ';
console.log(`trim后："${spaced.trim()}"`); // "JavaScript"
// 实际应用：清理用户输入
function processUserInput(input) {
let cleaned = input.trim();
if (cleaned === '') {
return '输入不能为空';
}
return `您输入的是：${cleaned}`;
}
console.log(processUserInput(' 张三 ')); // 您输入的是：张三
console.log(processUserInput(' ')); // 输入不能为空
11. trimStart() / trimLeft() - 去除开头空白
移除字符串开头的空白字符。
let text = ' Hello World';
console.log(`trimStart后："${text.trimStart()}"`); // "Hello World"
let another = ' Trim me';
console.log(`trimStart后："${another.trimStart()}"`); // "Trim me"
// trimLeft()是trimStart()的别名
console.log(`trimLeft后："${text.trimLeft()}"`); // "Hello World"
12. trimEnd() / trimRight() - 去除结尾空白
移除字符串结尾的空白字符。
let text = 'Hello World ';
console.log(`trimEnd后："${text.trimEnd()}"`); // "Hello World"
let another = 'Remove spaces at the end ';
console.log(`trimEnd后："${another.trimEnd()}"`); // "Remove spaces at the end"
// trimRight()是trimEnd()的别名
console.log(`trimRight后："${text.trimRight()}"`); // "Hello World"
填充方法
13. padStart() - 开头填充
用指定字符在字符串开头填充，直到达到指定长度。
let num = '5';
console.log('padStart填充0：', num.padStart(4, '0')); // 0005
let word = 'Hi';
console.log('padStart填充*：', word.padStart(6, '*')); // ****Hi
// 不指定填充字符，默认用空格
console.log('默认填充：', '7'.padStart(3)); // ' 7'
// 实际应用：格式化序号
function formatNumber(num, digits = 3) {
return num.toString().padStart(digits, '0');
}
for (let i = 1; i <= 5; i++) {
console.log(`编号：${formatNumber(i)}`); // 001, 002, 003, 004, 005
}
// 实际应用：对齐文本
function alignRight(text, width) {
return text.padStart(width);
}
console.log(alignRight('价格', 10));
console.log(alignRight('￥99', 10));
console.log(alignRight('￥1999', 10));
14. padEnd() - 结尾填充
用指定字符在字符串结尾填充，直到达到指定长度。
let num = '5';
console.log('padEnd填充0：', num.padEnd(4, '0')); // 5000
let word = 'Hello';
console.log('padEnd填充!：', word.padEnd(10, '!')); // Hello!!!!!
// 实际应用：格式化表格
function printRow(label, value) {
console.log(label.padEnd(15) + ' | ' + value.padStart(8));
}
printRow('商品名称', '笔记本电脑');
printRow('价格', '￥5999');
printRow('库存', '128');
// 输出：
// 商品名称 | 笔记本电脑
// 价格 | ￥5999
// 库存 | 128
重复方法
15. repeat() - 重复字符串
返回一个新字符串，包含原字符串重复指定次数后的结果。
let text = 'Hello ';
console.log('重复3次：', text.repeat(3)); // Hello Hello Hello
let star = '*';
console.log('重复10次：', star.repeat(10)); // **********
// 实际应用：创建分隔线
function createDivider(char = '-', length = 30) {
return char.repeat(length);
}
console.log(createDivider()); // ------------------------------
console.log(createDivider('=', 20)); // ====================
// 实际应用：文本缩进
function indent(text, level) {
return ' '.repeat(level * 2) + text;
}
console.log(indent('一级标题', 1)); // 一级标题
console.log(indent('二级标题', 2)); // 二级标题
console.log(indent('三级标题', 3)); // 三级标题
替换方法
16. replace() - 替换第一个匹配项
替换字符串中第一个匹配的子串，返回新字符串。
let text = 'Hello World';
console.log('替换World：', text.replace('World', 'JavaScript')); // Hello JavaScript
let sentence = 'The sky is blue.';
console.log('替换颜色：', sentence.replace('blue', 'red')); // The sky is red.
// 只替换第一个匹配项
let repeated = 'apple apple apple';
console.log(repeated.replace('apple', 'orange')); // orange apple apple
// 使用正则表达式
let msg = 'Hello 123 World 456';
console.log(msg.replace(/\d+/, '数字')); // Hello 数字 World 456（只替换第一个数字）
17. replaceAll() - 替换所有匹配项（ES2021）
替换字符串中所有匹配的子串，返回新字符串。
let text = 'Hello World, World!';
console.log('替换所有World：', text.replaceAll('World', 'JavaScript'));
// Hello JavaScript, JavaScript!
let repeated = 'abc abc abc';
console.log('替换所有abc：', repeated.replaceAll('abc', 'xyz')); // xyz xyz xyz
// 使用正则表达式（需要全局标志g）
let msg = 'Hello 123 World 456';
console.log(msg.replaceAll(/\d+/g, '数字')); // Hello 数字 World 数字
// 实际应用：敏感词过滤
function filterBadWords(text, badWords) {
let filtered = text;
badWords.forEach(word => {
filtered = filtered.replaceAll(word, '*'.repeat(word.length));
});
return filtered;
}
let comment = '这个产品真垃圾，服务也很差，客服是笨蛋';
let filtered = filterBadWords(comment, ['垃圾', '差', '笨蛋']);
console.log(filtered); // 这个产品真**，服务也很*，客服是**
分割方法
18. split() - 分割字符串为数组
根据指定的分隔符将字符串拆分成数组。
let text = 'Hello,World,JavaScript';
console.log('按逗号分割：', text.split(',')); // ['Hello', 'World', 'JavaScript']
let sentence = 'This is a test sentence';
console.log('按空格分割：', sentence.split(' ')); // ['This', 'is', 'a', 'test', 'sentence']
// 限制返回数量
let data = 'a,b,c,d,e';
console.log('限制返回2个：', data.split(',', 2)); // ['a', 'b']
// 分割每个字符
let word = 'Hello';
console.log('按字符分割：', word.split('')); // ['H', 'e', 'l', 'l', 'o']
// 实际应用：解析CSV数据
let csvLine = '张三,25,北京,工程师';
let parts = csvLine.split(',');
console.log('姓名：', parts[0]); // 张三
console.log('年龄：', parts[1]); // 25
console.log('城市：', parts[2]); // 北京
查找方法
19. indexOf() - 查找首次出现位置
返回指定子串在字符串中首次出现的索引，找不到返回-1。
let text = 'Hello, TpointTech!';
console.log('TpointTech的位置：', text.indexOf('TpointTech')); // 7
let sentence = 'The TpointTech Welcomes You.';
console.log('Welcomes的位置：', sentence.indexOf('Welcomes')); // 15
let notFound = 'Hello World';
console.log('不存在的子串：', notFound.indexOf('JavaScript')); // -1
// 指定开始搜索位置
console.log(text.indexOf('o', 5)); // 从索引5开始找'o'
// 实际应用：检查是否包含子串
function contains(str, substring) {
return str.indexOf(substring) !== -1;
}
console.log(contains('JavaScript is fun', 'fun')); // true
console.log(contains('JavaScript is fun', 'boring')); // false
20. lastIndexOf() - 查找之后一次出现位置
返回指定子串在字符串中之后一次出现的索引。
let text = 'Hello JavaScript, JavaScript is fun!';
console.log('之后一次JavaScript的位置：', text.lastIndexOf('JavaScript')); // 18
let sentence = 'The sun sets in the west, and the west is beautiful.';
console.log('之后一次west的位置：', sentence.lastIndexOf('west')); // 34
let notFound = 'Hello World';
console.log('不存在的子串：', notFound.lastIndexOf('Python')); // -1
// 实际应用：获取文件路径中的文件名
function getFileNameFromPath(path) {
let lastSlash = path.lastIndexOf('/');
if (lastSlash === -1) return path;
return path.slice(lastSlash + 1);
}
console.log(getFileNameFromPath('/users/docs/report.pdf')); // report.pdf
console.log(getFileNameFromPath('C:\\files\\image.jpg')); // image.jpg（注意转义）
21. search() - 正则搜索
使用正则表达式搜索子串，返回第一个匹配的索引。
let text = 'Hello, JavaScript!';
console.log('搜索JavaScript：', text.search('JavaScript')); // 7
let sentence = 'The rain in Spain stays mainly in the plain.';
console.log('搜索rain：', sentence.search(/rain/)); // 4
// 区分大小写
let caseInsensitive = 'Hello World';
console.log('区分大小写搜索：', caseInsensitive.search('hello')); // -1
console.log('不区分大小写搜索：', caseInsensitive.search(/hello/i)); // 0
// 实际应用：验证邮箱格式
function hasEmail(text) {
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;
return text.search(emailPattern) !== -1;
}
console.log(hasEmail('请联系我们：support@example.com')); // true
console.log(hasEmail('没有邮箱的文本')); // false
他实用方法
22. valueOf() - 获取原始值
返回String对象的原始值。
let strObj = new String('TpointTech');
console.log('原始值：', strObj.valueOf()); // TpointTech
let str = '普通字符串';
console.log('普通字符串的valueOf：', str.valueOf()); // 普通字符串
// 实际应用：处理字符串对象
function processString(input) {
// 确保处理的是原始字符串
let primitive = input.valueOf();
return primitive.trim().toUpperCase();
}
let strObj2 = new String(' hello ');
console.log(processString(strObj2)); // 'HELLO'
课程知识要点
-
基本属性：length获取字符串长度
-
字符访问：charAt()、charCodeAt()、at()（支持负数索引）
-
子串提取：slice()（推荐）、substring()（自动交换参数）、substr()（已弃用）
-
大小写转换：toUpperCase()、toLowerCase()
-
拼接方法：concat()、+运算符、模板字符串
-
空白处理：trim()、trimStart()、trimEnd()
-
填充方法：padStart()、padEnd()
-
重复方法：repeat()
-
替换方法：replace()、replaceAll()（ES2021）
-
分割方法：split()
-
查找方法：indexOf()、lastIndexOf()、search()
-
原始值获取：valueOf()
开发实践建议
基于多年JavaScript开发经验，我对字符串方法的使用建议如下：
// 1. 优先使用现在方法
let str = ' Hello World ';
// 现在写法
if (str.trim().startsWith('Hello')) { ... }
if (str.trim().includes('World')) { ... }
// 传统写法（繁琐）
if (str.trim().indexOf('Hello') === 0) { ... }
if (str.trim().indexOf('World') !== -1) { ... }
// 2. 模板字符串优于拼接
let name = '张三';
let age = 25;
// 推荐
let info = `姓名：${name}，年龄：${age}`;
// 不推荐
let info2 = '姓名：' + name + '，年龄：' + age;
// 3. 链式调用
let result = ' JavaScript is awesome '
.trim()
.toLowerCase()
.replace('awesome', 'great')
.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
console.log(result); // 'JavaScript Is Great'
// 4. 处理用户输入
function sanitizeInput(input) {
return input.trim().replace(/\s+/g, ' ');
}
let messy = ' 这是 一个 有 多余空格的 文本 ';
console.log(sanitizeInput(messy)); // '这是 一个 有 多余空格的 文本'
// 5. 正则表达式与字符串方法结合
function extractEmails(text) {
const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
return text.match(emailRegex) || [];
}
let sample = '联系我们：support@example.com 或 sales@company.com.cn';
console.log(extractEmails(sample));
// ['support@example.com', 'sales@company.com.cn']
// 6. 使用at()访问末尾字符（ES2022+）
let lastChar = str.at(-1); // 简洁
// 传统方式
let lastCharOld = str[str.length - 1];
// 7. 使用replaceAll()进行全局替换（ES2021+）
let text = 'cat cat cat';
console.log(text.replaceAll('cat', 'dog')); // 'dog dog dog'
// 传统方式
console.log(text.replace(/cat/g, 'dog')); // 同样效果
字符串处理是JavaScript编程中最常见的任务之一。掌握这些方法，能够让你在处理用户输入、格式化数据、解析文本时更加得心应手。随着ECMAScript标准的不断发展，字符串方法也在不断丰富，让我们的代码更加简洁优雅。
