一些舊版的瀏覽器或舊瀏覽器本身不支援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 - 代表一個或多個空格。
| - 它代表「OR」運算子。
\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() 方法。
以上是在 JavaScript 中為 String.prototype.trim() 方法實作 polyfill的詳細內容。更多資訊請關注PHP中文網其他相關文章！
