JavaScript 字符串截取
在JavaScript编程中，字符串截取是一项非常基础且常用的操作。无论是处理用户输入、格式化数据还是进行文本分析，我们都需要能够从一个字符串中提取特定的部分。本文将详细介绍JavaScript中进行字符串截取的不同方法，帮助你掌握这一重要技能。
什么是字符串截取？
字符串截取指的是从一个字符串中提取出一部分子字符串的过程。在JavaScript中，我们有多种方法可以实现这一功能：
substring()方法slice()方法substr()方法（已弃用，不推荐使用）
JavaScript中的字符串是从0开始索引的，也就是说第一个字符的索引是0，第二个字符的索引是1，以此类推。
让我们逐一探讨这些方法的用法和特点。
substring() 方法
substring() 方法接收两个参数：起始索引和结束索引（可选）。它返回原始字符串中从起始索引到结束索引（不包含结束索引处的字符）的子字符串。
语法
string.substring(startIndex, endIndex)
startIndex：必需，表示截取的开始位置endIndex：可选，表示截取的结束位置（不包含在返回结果中）。如果省略，则截取到字符串结尾。
示例
let message = "Hello, World!";
let result = message.substring(0, 5);
console.log(result); // 输出: Hello
在这个例子中，我们从索引0开始截取到索引5（不包含索引5的字符）。
substring()的特点
- 如果
startIndex等于endIndex，返回空字符串 - 如果省略
endIndex，则提取到字符串的末尾 - 如果任一参数小于0或为NaN，则被视为0
- 如果任一参数大于字符串长度，则被视为字符串长度
- 如果
startIndex大于endIndex，两个参数会交换位置
let text = "Hello World";
console.log(text.substring(6, 11)); // 输出: World
console.log(text.substring(11, 6)); // 输出: World (参数交换)
console.log(text.substring(6)); // 输出: World (省略endIndex)
console.log(text.substring(-3, 2)); // 输出: He (负数被视为0)
slice() 方法
slice() 方法也用于提取字符串的一部分，并返回一个新的字符串，而不修改原始字符串。
语法
string.slice(startIndex, endIndex)
startIndex：必需，表示截取的开始位置endIndex：可选，表示截取的结束位置（不包含在返回结果中）。如果省略，则截取到字符串结尾。
示例
let message = "Hello, World!";
let result = message.slice(7, 12);
console.log(result); // 输出: World
slice()的特点
- 如果参数为负数，则从字符串末尾开始计数
- 如果
startIndex大于endIndex，返回空字符串 - 其他行为与
substring()类似
let text = "Hello World";
console.log(text.slice(6, 11)); // 输出: World
console.log(text.slice(-5)); // 输出: World (从末尾计数)
console.log(text.slice(-5, -1)); // 输出: Worl (从末尾计数)
console.log(text.slice(11, 6)); // 输出: "" (空字符串)
substr() 方法（不推荐使用）
substr() 方法已被ECMAScript标准弃用，虽然多数浏览器仍然支持，但不建议在新代码中使用。
substr() 方法接收两个参数：起始索引和要提取的字符数。
语法
string.substr(startIndex, length)
startIndex：必需，表示截取的开始位置length：可选，表示要提取的字符数。如果省略，则提取到字符串结尾。
示例
let message = "Hello, World!";
let result = message.substr(7, 5);
console.log(result); // 输出: World
substring() 和 slice() 的对比
虽然 substring() 和 slice() 很相似，但它们在处理特殊情况时有所不同：
let text = "Hello World";
// 处理负值
console.log(text.substring(-3)); // 输出: Hello World (负值被视为0)
console.log(text.slice(-3)); // 输出: rld (从末尾数第3个字符开始)
// 处理参数顺序
console.log(text.substring(8, 3)); // 输出: lo Wo (参数交换为3, 8)
console.log(text.slice(8, 3)); // 输出: "" (空字符串，因为起点>终点)
实际应用案例
案例1：提取文件扩展名
function getFileExtension(filename) {
return filename.slice(filename.lastIndexOf('.'));
}
console.log(getFileExtension('document.pdf')); // 输出: .pdf
console.log(getFileExtension('image.jpg')); // 输出: .jpg
案例2：隐藏电话号码的中间部分
function maskPhoneNumber(phone) {
if (phone.length !== 11) return "Invalid phone number";
return phone.substring(0, 3) + '****' + phone.substring(7);
}
console.log(maskPhoneNumber('13912345678')); // 输出: 139****5678
案例3：截取URL的查询参数
function getQueryParam(url, param) {
// 找到参数部分
let queryString = url.slice(url.indexOf('?') + 1);
// 分割参数
let params = queryString.split('&');
for (let i = 0; i < params.length; i++) {
let pair = params[i].split('=');
if (pair[0] === param) {
return pair[1];
}
}
return null;
}
let url = "https://example.com/search?query=javascript&category=tutorial";
console.log(getQueryParam(url, 'query')); // 输出: javascript
console.log(getQueryParam(url, 'category')); // 输出: tutorial
字符串截取的性能考虑
在大多数情况下，substring() 和 slice() 的性能差异可以忽略不计。但是对于大型字符串或性能关键的应用，slice() 通常比 substring() 稍快，尤其是在处理大字符串时。
此外，如果你需要处理负索引，slice() 是更好的选择，因为它可以直接支持从字符串末尾开始计数。
总结
JavaScript提供了多种字符串截取的方法，其中最常用的是 substring() 和 slice()。
substring(startIndex, endIndex): 不支持负索引，会交换顺序错误的参数slice(startIndex, endIndex): 支持负索引，如果参数顺序错误则返回空字符串substr(startIndex, length): 已弃用，接受起始位置和长度作为参数
对于初学者来说，建议主要使用 slice() 方法，因为它具有更一致的行为，并支持负索引，使从字符串末尾截取变得更加简单。
练习题
- 编写一个函数，提取字符串中的前n个字符。
- 编写一个函数，从URL中提取域名部分。
- 编写一个函数，将长文本截断为指定长度，并在末尾添加"..."。
扩展阅读
通过掌握这些字符串截取方法，你将能够更加高效地处理JavaScript中的文本数据，无论是在前端表单验证、数据处理还是后端逻辑中都能游刃有余。