JS 截取字符串中的一部分|极客笔记

JS 截取字符串中的一部分

在前端开发中，经常会遇到需要对字符串进行截取的情况，比如从一个长文本中提取出关键信息显示在页面上，或者限制用户输入的字符长度等。JavaScript提供了丰富的方法来实现对字符串的截取操作，本文将详细介绍这些方法及其应用场景。

substr() 方法

substr() 方法用于截取字符串中指定位置的字符，其语法为：

str.substr(start, length)

其中 start 参数表示截取的起始位置，length 参数表示截取的长度。需要注意的是，如果 length 参数被省略或超出字符串长度，将截取从 start 位置开始到字符串末尾的所有字符。

下面是一个使用 substr() 方法的示例：

const str = 'Hello, World!';
const result = str.substr(7, 5);
console.log(result); // Output: World

substring() 方法

substring() 方法同样用于截取字符串中指定位置的字符，其语法为：

str.substring(start, end)

其中 start 参数表示截取的起始位置，end 参数表示截取的结束位置（不包括该位置的字符）。如果 end 参数被省略或超出字符串长度，将截取从 start 位置开始到字符串末尾的所有字符。

下面是一个使用 substring() 方法的示例：

const str = 'Hello, World!';
const result = str.substring(7, 12);
console.log(result); // Output: World

slice() 方法

slice() 方法也用于截取字符串中指定位置的字符，其语法为：

str.slice(start, end)

slice() 方法与 substring() 方法的区别在于，如果 start 参数大于 end 参数，则返回空字符串。如果 start 或 end 为负数，则表示从字符串的末尾开始计数。

下面是一个使用 slice() 方法的示例：

const str = 'Hello, World!';
const result = str.slice(-6);
console.log(result); // Output: World!

使用场景

以上介绍了三种常用的字符串截取方法，它们在实际开发中有着不同的应用场景。下面以几个具体的示例来说明：

限制用户输入字符长度

在用户输入框中，有时需要限制用户输入的字符长度，可以通过截取字符串的方式来实现。比如，限制用户名长度不超过10个字符：

const input = document.getElementById('username');
input.addEventListener('input', function() {
  if (input.value.length > 10) {
    input.value = input.value.slice(0, 10);
  }
});

提取文件名后缀

在文件上传功能中，可能需要提取文件名的后缀以进行验证或展示。可以通过截取字符串的方式来实现：

const filename = 'example.png';
const extension = filename.slice(filename.lastIndexOf('.'));
console.log(extension); // Output: .png

截取文章摘要

在文章列表页中，通常只展示文章的摘要部分，可以通过截取字符串的方式来实现：

const article = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor...';
const summary = article.slice(0, 50) + '...';
console.log(summary); // Output: Lorem ipsum dolor sit amet, consectetur adipiscing elit...