整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JavaScript 是現代 Web 開發的核心技術之一，它讓網頁變得生動且具有交互性。字符串操作是前端開發中最常見的任務之一，特別是在處理用戶輸入、解析數據或者生成動態內容時。本文旨在探討 JavaScript 中用于截取字符串的多種方法，并通過實例來比較它們的特點和適用場景。
截取字符串是指從給定的字符串中提取出部分字符。JavaScript 提供了多種內置方法來進行這種操作，例如 substring(), slice(), substr(), charAt(), 以及正則表達式等。此外，還有第三方庫提供的擴展功能。
let str="Hello, world!";
console.log(str.substring(7, 12)); // "world"
console.log(str.slice(7, 12)); // "world"
console.log(str.substr(7, 5)); // "world"
console.log(str.charAt(7)); // "w"
每種方法在實現上各有特點：
假設我們需要從一個包含日期的字符串中提取月份：
function extractMonth(dateStr) {
const parts=dateStr.split('-');
return parts[1];
}
const dateString="2023-07-25";
console.log(extractMonth(dateString)); // "07"
在這個例子中，我們使用 split() 方法來分割字符串，然后選取第二部分（即月份）。
在處理包含多字節 Unicode 字符的字符串時，某些方法（如 substr()）可能會產生錯誤的結果。解決方法是使用 slice() 或第三方庫提供的方法。
function unicodeSlice(str, start, end) {
return [...str].slice(start, end).join('');
}
const unicodeStr="こんにちは";
console.log(unicodeSlice(unicodeStr, 0, 2)); // "こん"
當處理大量數據時，頻繁使用字符串方法可能會成為性能瓶頸。解決方法是盡量減少字符串操作，或者使用更高效的算法。
function optimizeStringOperations(str, pattern) {
const regex=new RegExp(pattern, 'g');
return str.replace(regex, '');
}
const longStr="abcde".repeat(10000);
console.log(optimizeStringOperations(longStr, 'b')); // "acdeacde...acde"
slice() 方法支持負數索引，而 substring() 和 substr() 不支持。
可以使用正則表達式結合 match() 或 replace() 方法。
function cutAfter(str, char) {
return str.split(char).pop();
}
const str="http://example.com/path/to/resource";
console.log(cutAfter(str, '/')); // "to/resource"
通過本文的學習，我們不僅了解了如何有效地截取字符串，還了解了不同方法背后的原理及其適用場景。隨著ES6及更高版本標準的引入，新的字符串處理方法和工具也在不斷出現，這將為我們提供更多的選擇和更高的效率。
字符串操作是前端開發中的重要組成部分，掌握這些技巧不僅能提高我們的編碼效率，還能增強代碼的健壯性和可維護性。未來，我們可以期待更多高效的字符串處理工具和技術的發展。
總之，選擇合適的方法取決于具體的應用場景和個人偏好。希望這篇文章能夠幫助你在實際工作中更加熟練地使用這些方法。
時前端開發工作時，經常會需要對字符串進行截斷，比如新聞標題，需要把超出可視區域后需要進行截斷，如下圖：
小編我由主要負責后端開發，最開始是采用后端方法來實現字符串截斷，然后傳遞給前端人員使用。
但是這個方式有一個弊端，尤其是響應式的頁面，截取字數無法精確控制，比如pc端可視區域可以顯示150個字符，但是手機端屏幕最多只能顯示20個字符，所以通過后端來控制字符數是非常爛的解決方案，最好的解決辦法是通過前端方式來截斷字符串，下面分別用javascript和css的方式來實現。
先看一下html部分
<div class="title"> 為什么要制作高端的網站？高端網站建設價格為什么越來越高？ </div>
下面分別針對這行html進行截斷操作。
先封裝一個截取字符串的方法，代碼如下：
<script>
String.prototype.left=function (len) //左邊截取字段數
{
var str=this;
if (isNaN(len) || len==null) {
len=str.length;
}
else {
if (parseInt(len) < 0 || parseInt(len) > str.length) {
len=str.length;
}
}
return str.substr(0, len);
}
</script>
然后再頁面中采用jquery方式調用：
<script type="text/javascript">
$(function () {
var $title=(".title");
var txt=$title.html().left(50); //截取前50個字符
$title.html(txt); //重新
});
</script>
這種方式可以實現字符串的截取，但是這種方法也不理想，pc端和手機端截取字數還是需要單獨根據瀏覽器類型來定義。
定義一個css類：
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow: ellipsis; 這句意思是超出可視區域后顯示三個點...，如果只想截斷，可以改為： text-overflow:clip。
今天先寫到這里，如果感覺對您有幫助，可以轉發一下，后續有時間再分享一下前端技巧給大家。
<html>
<head>
<meta charset="UTF-8">
<title>用 css 實現字符串截斷</title>
<style>
div {
width: 300px;
overflow: hidden;
/*規定當內容溢出元素框時發生的事情*/
white-space: nowrap;
/*設置如何處理元素內的空白。規定在文本中不進行換行*/
text-overflow: ellipsis;
/*規定當文本溢出包含元素時發生的事情*/
}
div:hover{
cursor:pointer;
}
div:hover:before{
content:attr(title);
background:#d9444a;
color:#fff;
padding:.8em 1em;
position:absolute;
left:100%;
top:-70%;
margin-left:14px;
white-spack:pre;
}
div:hover:after{
content:" ";
position:absolute;
left:80%;
width:0;
height:0;
border-right:8px solid #d9444a;
border-top:8px solid transpatrnt;
border-bottom:8px solid transparent;
}
</style>
</head>
<body>
<div title="輕輕松松制作div+css截取字符段在規定長度，超出部分用...代替！">輕輕松松制作div+css截取字符段在規定長度，超出部分用...代替！</div>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
