js怎么截取长度符串

JavaScript 提供了多种方法来截取字符串长度，常见的方法有 substr()、substring() 和 slice()。 其中，substr() 方法是最常用的，因为它功能强大且易于理解。下面详细介绍其中的一种方法：

substr() 方法： 这是一个非常常用的方法，它接受两个参数：起始位置和截取的长度。假设我们有一个字符串 str = "Hello, World!"，如果我们想从第7个字符开始截取5个字符，可以这样做：str.substr(7, 5)，结果为 "World"。

一、substr() 方法的使用

1、基本使用

substr(start, length) 方法用于从字符串中截取指定长度的子字符串。start 参数表示子字符串的起始位置，length 参数表示要截取的字符数。

let str = "Hello, World!";
let substr = str.substr(7, 5); // "World"

在这个例子中，start 是 7，length 是 5。所以从第7个字符开始，截取5个字符。

2、参数解释

start：指定子字符串的起始位置。如果为负数，则从字符串末尾开始计算位置。
length：指定要截取的字符数。如果忽略该参数，则子字符串将从起始位置一直到字符串的末尾。

let str = "Hello, World!";
let substr1 = str.substr(7); // "World!"
let substr2 = str.substr(-6, 5); // "World"

3、常见用途

截取固定长度的字符串：通常用于限制用户输入或处理固定格式的数据。
提取特定部分的数据：例如提取日期中的年份、月份等。

let dateStr = "2023-10-05";
let year = dateStr.substr(0, 4); // "2023"
let month = dateStr.substr(5, 2); // "10"
let day = dateStr.substr(8, 2); // "05"

二、substring() 方法的使用

1、基本使用

substring(start, end) 方法用于提取字符串中介于两个指定下标之间的子字符串，其中 start 是子字符串的起始位置，end 是子字符串的结束位置（不包括该位置的字符）。

let str = "Hello, World!";
let substr = str.substring(7, 12); // "World"

2、参数解释

start：指定子字符串的起始位置。
end：指定子字符串的结束位置（不包括该位置的字符）。如果省略该参数，则子字符串将一直延伸到字符串的末尾。

let str = "Hello, World!";
let substr1 = str.substring(7); // "World!"
let substr2 = str.substring(7, 12); // "World"

3、常见用途

提取特定范围的字符：用于提取固定位置的字符，例如提取文件扩展名。

let filename = "document.pdf";
let extension = filename.substring(filename.lastIndexOf('.') + 1); // "pdf"

三、slice() 方法的使用

1、基本使用

slice(start, end) 方法与 substring() 方法类似，但支持负索引。start 是子字符串的起始位置，end 是子字符串的结束位置（不包括该位置的字符）。

let str = "Hello, World!";
let substr = str.slice(7, 12); // "World"

2、参数解释

start：指定子字符串的起始位置。如果为负数，则从字符串末尾开始计算位置。
end：指定子字符串的结束位置（不包括该位置的字符）。如果省略该参数，则子字符串将一直延伸到字符串的末尾。

let str = "Hello, World!";
let substr1 = str.slice(7); // "World!"
let substr2 = str.slice(-6, -1); // "World"

3、常见用途

提取特定范围的字符：用于提取固定位置的字符，特别是从末尾开始的字符。

let str = "Hello, World!";
let lastWord = str.slice(-6); // "World!"

四、综合比较

1、相同点

substr()、substring() 和 slice() 都可以用于截取字符串。
都支持根据指定位置和长度进行截取。

2、不同点

substr()：接受起始位置和长度，适合用于截取固定长度的子字符串。
substring()：接受起始位置和结束位置，不支持负索引。
slice()：接受起始位置和结束位置，支持负索引。

3、性能比较

在大多数情况下，这三种方法的性能差异并不明显，选择哪一种方法更多取决于具体的需求和代码的可读性。

let str = "Hello, World!";
console.time("substr");
for (let i = 0; i < 1000000; i++) {
    str.substr(7, 5);
}
console.timeEnd("substr");
console.time("substring");
for (let i = 0; i < 1000000; i++) {
    str.substring(7, 12);
}
console.timeEnd("substring");
console.time("slice");
for (let i = 0; i < 1000000; i++) {
    str.slice(7, 12);
}
console.timeEnd("slice");

五、应用实例

1、限制输入框字符长度

在处理用户输入时，常常需要限制输入框的字符长度。可以使用 substr() 方法来截取用户输入的前 n 个字符。

<!DOCTYPE html>
<html>
<body>
<input type="text" id="inputText" onkeyup="limitLength(this, 10)">
<p id="output"></p>
<script>
function limitLength(input, maxLength) {
    if (input.value.length > maxLength) {
        input.value = input.value.substr(0, maxLength);
    }
    document.getElementById("output").innerText = input.value;
}
</script>
</body>
</html>

2、提取 URL 参数

在处理 URL 时，常常需要提取特定的参数值。可以使用 substring() 或 slice() 方法来实现。

function getQueryParam(url, param) {
    let queryString = url.split('?')[1];
    if (!queryString) return null;
    let params = new URLSearchParams(queryString);
    return params.get(param);
}
let url = "https://example.com?page=2&sort=asc";
let page = getQueryParam(url, "page"); // "2"
let sort = getQueryParam(url, "sort"); // "asc"

3、提取文件名和扩展名

在处理文件路径时，常常需要提取文件名和扩展名。可以使用 substring() 或 slice() 方法来实现。

function getFileName(filePath) {
    return filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'));
}
function getFileExtension(filePath) {
    return filePath.substring(filePath.lastIndexOf('.') + 1);
}
let filePath = "/path/to/document.pdf";
let fileName = getFileName(filePath); // "document"
let fileExtension = getFileExtension(filePath); // "pdf"

六、总结

在 JavaScript 中，substr()、substring() 和 slice() 三种方法都是截取字符串的常用方法。substr() 适合用于截取固定长度的子字符串，substring() 和 slice() 适合用于截取特定范围的子字符串。了解并熟练使用这些方法，可以帮助我们更高效地处理字符串数据。

js怎么截取长度符串

一、substr() 方法的使用

1、基本使用

2、参数解释

3、常见用途

二、substring() 方法的使用

1、基本使用

2、参数解释

3、常见用途

三、slice() 方法的使用

1、基本使用

2、参数解释

3、常见用途

四、综合比较

1、相同点

2、不同点

3、性能比较

五、应用实例

1、限制输入框字符长度

2、提取 URL 参数

3、提取文件名和扩展名

六、总结

相关问答FAQs：