JavaScript字符串處理之trim()和replace()詳解

更新時間：2024年10月26日 10:24:21 作者：前端開發(fā)博客

這篇文章主要給大家介紹了關(guān)于JavaScript字符串處理之trim()和replace()的相關(guān)資料,文中介紹的所有這些方法都不會修改原始字符串,而是返回一個新的字符串,需要的朋友可以參考下

前言

字符串操作是編程的基礎(chǔ)技能。在 JavaScript 中，你經(jīng)常需要處理字符串，其中一項常見任務(wù)就是修剪字符。修剪指的是移除字符串開頭和/或結(jié)尾的特定字符，例如空格、制表符、換行符或逗號。

你可能還想移除程序中不需要的特定字符，并用其他字符替換它們。

本文將介紹一些在 JavaScript 中修剪和移除字符串字符的方法。

使用 trim() 方法移除空格

trim() 方法是 JavaScript 內(nèi)置的，可以直接用于移除字符串開頭和結(jié)尾的空格。

trim() 方法的語法很簡單：

string.trim()

直接對需要修剪的字符串調(diào)用 trim() 方法即可。這個方法會移除字符串開頭和結(jié)尾的所有空格，包括空格、制表符和換行符。

需要注意的是，trim() 方法不會修改原始字符串，而是返回一個新的字符串，其中開頭和結(jié)尾的空格已被移除。

舉個例子：

let greeting = "    Hello World    ";
let trimmedGreeting = greeting.trim();
console.log(trimmedGreeting); // 輸出: "Hello World"

在這個例子中，我們聲明了一個名為 greeting 的變量，并賦值為字符串 Hello World，字符串的開頭和結(jié)尾都有空格。

為了移除這些空格，我們調(diào)用了 greeting 變量的 trim() 方法，并將結(jié)果存儲在一個新的變量 trimmedGreeting 中。

當(dāng)我們使用 console.log() 將新字符串打印到控制臺時，開頭和結(jié)尾的空格已經(jīng)不見了。

而原始字符串 greeting 仍然包含開頭和結(jié)尾的空格。

使用 trimStart() 方法移除開頭空格

如果只想移除字符串開頭的空格，可以使用 trimStart() 方法。

還是上面的例子：

let greeting = "    Hello World    ";
let trimmedGreeting = greeting.trimStart();
console.log(trimmedGreeting); // 輸出: "Hello World    "

在這個例子中，我們調(diào)用了 greeting 變量的 trimStart() 方法，并將結(jié)果存儲在 trimmedGreeting 中。這個方法只會移除字符串開頭的空格，結(jié)尾的空格仍然保留。

使用 trimEnd() 方法移除結(jié)尾空格

如果你只想移除字符串結(jié)尾的空格，可以使用 trimEnd() 方法。

還是上面的例子：

let greeting = "    Hello World    ";
let trimmedGreeting = greeting.trimEnd();
console.log(trimmedGreeting); // 輸出: "    Hello World"

在這個例子中，我們調(diào)用了 greeting 變量的 trimEnd() 方法，并將結(jié)果存儲在 trimmedGreeting 中。這個方法只會移除字符串結(jié)尾的空格，開頭的空格仍然保留。

使用 replace() 方法移除特定字符

要移除字符串中的特定字符，可以使用 replace() 方法。

replace() 方法的語法如下：

string.replace(pattern, replacement);

replace() 方法有兩個參數(shù)：pattern 和 replacement。

pattern 指定要查找和替換的字符或字符串，可以是特定字符、子字符串或正則表達式。
replacement 是用于替換 pattern 的新字符或字符串。

需要注意的是，replace() 方法不會修改原始字符串，而是返回一個新的字符串。

舉個例子：

let sentence = "I love dogs";
let modifiedSentence = sentence.replace("dogs", "cats");
console.log(modifiedSentence); // 輸出: "I love cats"

在這個例子中，我們聲明了一個名為 sentence 的變量，并賦值為字符串 I love dogs。

然后，我們調(diào)用了 sentence 變量的 replace() 方法，將 dogs 替換成 cats，并將結(jié)果存儲在一個新的變量 modifiedSentence 中。

最后，我們使用 console.log() 將新字符串打印到控制臺，輸出結(jié)果為 "I love cats"。

使用 replace() 方法移除多個相同字符

在前面的例子中，我們只替換了一個單詞。如果想要替換多個相同的單詞，該怎么辦呢？

let sentence = "I love dogs because dogs are cute";
let modifiedSentence  = sentence.replace("dogs", "cats");
console.log(modifiedSentence); // 輸出: "I love cats because dogs are cute"

在這個例子中，我們想要將 sentence 變量中的兩個 dogs 都替換成 cats，但 replace() 方法默認(rèn)只會替換第一個匹配的字符。

為了替換所有匹配的字符，我們需要使用正則表達式。

let sentence = "I love dogs because dogs are cute";
let modifiedSentence  = sentence.replace(/dogs/g, "cats");
console.log(modifiedSentence); // 輸出: "I love cats because cats are cute"

在這個例子中，我們將第一個參數(shù)改成了正則表達式 /dogs/g，其中 g 表示全局匹配，這樣就可以替換所有匹配的字符了。

附：使用 trim 的表單提交

解決上述問題只需要加一行代碼即可：var str=ipt.value.trim()，這行代碼拿到表單值并對其清除了前后空格，后續(xù)執(zhí)行判斷時拿到的值是沒有前后空格的，也就意味著如果輸入空白字符則會將處理為沒有輸入內(nèi)容，從而解決了輸入空格提交表單沒有彈窗的情況

<body>
    <div class="box">
        <input type="text" placeholder="請輸入內(nèi)容">
        <button>提交</button>
        <p></p>
    </div>
     <script>
        var ipt=document.querySelector('input')
        var btn=document.querySelector('button')
        var p=document.querySelector('p')
        btn.addEventListener('click',function(){
            var str=ipt.value.trim()  //加入此行代碼即可
            if(str===''){
                alert('請輸入內(nèi)容')
            }else{
                p.innerHTML=str;
            }
        })
     </script>
</body>