資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 JavaScript 中實現 String.prototype.trim() 方法的 polyfill
某些舊版本的瀏覽器或舊瀏覽器本身不支援 JavaScript 的新功能。例如，如果您使用的是非常舊的瀏覽器版本，它可能不支援 ES10 版本 JavaScript 的功能。例如，某些版本的瀏覽器不支援 ES10 版本 JavaScript 中引入的 Array.falt() 方法來展平陣列。
在這種情況下，我們需要實現使用者定義的方法，以便舊版瀏覽器支援這些功能。在這裡，我們將為 String 物件的 trim() 方法實現 polyfill。
語法
使用者可以按照以下語法使用正則表示式為 string.prototype.trim() 方法實現 polyfill。
String.prototype.trim = function (string) {
return str.replace(/^\s+|\s+$/g, "");
}
在上面的語法中，我們使用了正則表示式來替換字串開頭和結尾的空格。
正則表示式解釋
^ − 表示字串的開頭。
\s+ − 表示一個或多個空格。
| − 表示“或”運算子。
\s+$ − 表示字串末尾的空格。
g − 表示刪除所有匹配項。
示例（使用內建的 string.trim() 方法）
在下面的示例中，我們使用了 String 物件的內建 trim() 方法來刪除字串開頭和結尾的空格。
<html>
<body>
<h2>Using the trim() method without polyfill in JavaScript</h2>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
let str = " This is string with white spaces! ";
content.innerHTML += "The original string is :-" + str + ".<br>";
let trimmed = str.trim();
content.innerHTML += "The trimmed string using trim() method is :-" + str + ".<br>";
</script>
</body>
</html>
示例（為 string.trim() 方法實現了 polyfill）
在下面的示例中，我們實現了 polyfill 來使用正則表示式修剪字串。我們編寫了正則表示式，將開頭和結尾的空格替換為空字串。
<html>
<body>
<h2>Using the <i> trim() method with polyfill </i> in JavaScript</h2>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
String.prototype.trim = function (string) {
let regex = /^\s+|\s+$/g;
return str.replace(regex, "");
}
let str = "Hi, How are you? ";
content.innerHTML += "The original string is :-" + str + ".<br>";
let trimmed = str.trim();
content.innerHTML += "The trimmed string using trim() method is :-" + str + "<br>";
</script>
</body>
</html>
示例
在下面的示例中，我們使用了 for 迴圈來查詢字串第一個和最後一個有效字元的索引。我們建立了一個包含不同字元的陣列，這些字元表示空格。之後，第一個 for 迴圈遍歷字串的字元，檢查第一個不在“spaces”陣列中的字元，並將該索引儲存在 start 變數中。此外，它以相同的方式從最後找到第一個有效字元。
最後，我們使用了 slice() 方法來獲取從“start”開始到“end”位置結束的子字串。
<html>
<body>
<h2>Using the <i> trim() method with polyfill </i> in JavaScript</h2>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
String.prototype.trim = function () {
const spaces = ["\s", "\t", "
", " ", "", "\u3000"];
let start = 0;
let end = this.length - 1;
// get the first index of the valid character from the start
for (let m = 0; m < this.length; m++) {
if (!spaces.includes(this[m])) {
start = m;
break;
}
}
// get the first index of valid characters from the last
for (let n = this.length - 1; n > -1; n--) {
if (!spaces.includes(this[n])) {
end = n;
break;
}
}
// slice the string
return this.slice(start, end + 1);
}
let str = " Hi, How are you? ";
content.innerHTML += "The original string is :-" + str + ".<br>";
let trimmed = str.trim();
content.innerHTML += "The trimmed string using trim() method is :-" + str + "<br>";
</script>
</body>
</html>
在本教程中，使用者學習瞭如何為 string.trim() 方法實現 polyfill。我們已經看到了兩種為 trim() 方法實現 polyfill 的方法。第一種方法使用正則表示式和 replace() 方法。第二種方法是樸素方法，使用 for 迴圈、slice() 和 includes() 方法。
277 次瀏覽
