前端截取字符串詳解

一、前端截取字符串的方法

在前端開發中，字符串的操作非常常見，其中截取字符串操作也是必不可少的操作之一。在JavaScript中，有多種方法可以用於截取字符串，比如使用substring、substr等方法。

// 使用substring方法截取字符串
let str = "Hello World";
let result = str.substring(0, 5); // 截取從0開始，長度為5的字符串
console.log(result);
// 輸出："Hello"

除了使用JavaScript內置的方法，還可以藉助第三方庫（如Lodash），以便更加方便地操作字符串。

二、前端截取字符串省略富文本

在前端開發中，為了更好地展示長文本，常常需要對長文本進行截取並添加省略號。如果是普通文本，可以直接使用substr等方法進行截取，但如果是富文本呢？此時可以藉助一些第三方庫（如HTML-ellipsis）進行操作。

// 使用HTML-ellipsis庫實現省略富文本
import ellipsis from "html-ellipsis";
let element = document.getElementById("content"); // 獲取DOM元素
ellipsis(element, { maxLine: 2, ellipsis: "..." }); // 顯示兩行，超出部分顯示...

通過上述代碼，我們可以將DOM元素中的富文本進行截取，最多顯示兩行，並在超出的部分顯示…

三、前端截取字符串最後一位

在前端開發中，有時候需要獲取字符串的最後一位字符，此時可以使用JavaScript內置的方法charAt。

// 使用charAt方法獲取字符串的最後一位字符
let str = "Hello World";
let lastChar = str.charAt(str.length - 1); // 獲取字符串的最後一位字符
console.log(lastChar);
// 輸出："d"

四、前端截取字符串前面的數字

在前端開發中，有時需要從字符串中提取出前面的數字，此時可以藉助正則表達式進行匹配。

// 使用正則表達式匹配提取前面的數字
let str = "123Hello World";
let result = str.match(/^\d+/); // 匹配以數字開頭的字符串
console.log(result[0]);
// 輸出："123"

五、前端截取字符串的函數

為了更好地復用截取字符串的代碼，可以封裝一個函數進行操作。

// 自定義一個截取字符串的函數
function subStr(str, start, length) {
  return str.substring(start, start + length);
}
let str = "Hello World";
let result = subStr(str, 0, 5); // 截取從0開始，長度為5的字符串
console.log(result);
// 輸出："Hello"

六、前端截取字符串前兩位

和截取字符串前面的數字一樣，也可以使用正則表達式進行匹配來獲取字符串前兩位。

// 使用正則表達式匹配獲取字符串前兩位
let str = "Hello World";
let result = str.match(/^.{0,2}/); // 匹配字符串前兩位
console.log(result[0]);
// 輸出："He"

七、前端截取字符串前十位

和前面的一些操作類似，我們也可以使用substring等方法進行截取。

// 使用substring方法截取字符串前十位
let str = "Hello World";
let result = str.substring(0, 10); // 截取從0開始，長度為10的字符串
console.log(result);
// 輸出："Hello Worl"

八、前端截取字符串最後一位的方式

除了第三個小標題中介紹的使用charAt方法獲取最後一位字符外，還有一種方式是使用substring方法。

// 使用substring方法獲取字符串最後一位
let str = "Hello World";
let lastChar = str.substring(str.length - 1); // 截取最後一位字符
console.log(lastChar);
// 輸出："d"

九、前端截取字符串前18個字

同樣可以使用substring等方法進行截取，只需要指定長度為18即可。

// 使用substring方法截取字符串前18個字
let str = "Hello World, Welcome to Frontend";
let result = str.substring(0, 18); // 截取前18個字
console.log(result);
// 輸出："Hello World, Welco"

十、前端vue截取字符串的方法

在Vue中，可以通過過濾器(filter)來截取字符串。

// 定義一個截取字符串的過濾器

Vue.filter("subStr", function(str, start, length) {

return str.substring(start, start + length);

});

let app = new Vue({

el: "#app",

data: {

msg: "Hello World"

}

});

// 在HTML中使用截取過濾器

{{ msg | subStr(0, 5) }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/292076.html