JavaScript如何在一個字串中每隔兩個字母插入一個空格?


在本文中,我們將學習如何在字串中每隔兩個字母插入一個空格。在進入正題之前,讓我們快速瞭解一下JavaScript中的字串。

一個或多個字元(可以是數字或符號)的序列稱為字串。字串在JavaScript中是不可變的原始資料型別,這意味著它們不能被修改。

讓我們深入本文,學習更多關於在字串中每隔兩個字母插入空格的方法。為此,我們將使用replace()方法和正則表示式。

JavaScript中的replace()方法

replace()方法返回一個新字串,其中一個、一些或所有匹配模式的字元都被替換為替換字元。字串正則表示式可以用作模式,並且可以為每個匹配呼叫一個函式作為替換。如果模式是字串,則只替換模式的第一個例項。

語法

以下是replace()方法的語法

string.replace(searchValue, newValue)

示例

在下面的示例中,我們執行一個指令碼,在每兩個字母后插入空格。

<!DOCTYPE html>
<html>
<body>
   <script>
      function space(s) {
         return s.toString().replace(/\d{2}(?=.)/g, '$& ');
      }
      document.write(space(9848004322148));
   </script>
</body>
</html>

執行上述指令碼後,輸出視窗將彈出並顯示在網頁上應用了空格(每兩個字元後一個空格)的數字,因為事件觸發,允許每兩個字元之間有空格。

示例

考慮以下示例,我們使用正則表示式方法來應用空格。

<!DOCTYPE html>
<html>
<body>
   <script>
      const regex = /\d{2}(?!$)/g;
      function Number(num) {
         return num.replace(regex, "$& ");
      }
      const strings = ['1234567890'];
      for (const string of strings) {
         document.write(string, '=>', Number(string));
      }
   </script>
</body>
</html>

當指令碼執行時,它將生成一個輸出,其中包含字串內容,並在網頁瀏覽器上顯示每兩個字元後應用的空格,這是由使用者執行指令碼時觸發的事件引起的。

示例

讓我們執行以下程式碼,在每2個字元後應用空格。

<!DOCTYPE html>
<html>
<body>
   <script>
      var values = "JavaScriptTutorial";
      var result = values.replace(/.{1,2}(?=(.{2})+$)/g, '$& ');
      document.write("The actual result is=");
      document.write(values+ "<br>");
      document.write("After inserting space at nth position=")
      document.write(result);
   </script>
</body>
</html>

當指令碼執行時,它將生成一個輸出,在網頁瀏覽器上顯示實際結果和插入空格後的結果,因為空格是在使用者執行指令碼時觸發事件後應用的。

示例

讓我們考慮另一個示例,其中我們使用slice()join()方法。

<!DOCTYPE html>
<html>
<body>
   <script>
      var str="welcometothetutorialspoint";
      function formatStr(str, n) {
         var a = [], start=0;
         while(start<str.length) {
            a.push(str.slice(start, start+n));
            start+=n;
         }
         document.write(a.join(" "));
      }
      formatStr(str,2);
   </script>
</body>
</html>

執行上述指令碼後,輸出視窗將彈出並顯示在網頁上應用了空格(每兩個字元後一個空格)的文字,因為事件觸發。

更新於:2023年1月18日

3K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.