首頁 > web前端 > js教程 > 主體

使用 JavaScript 從字串中提取數字

WBOY
發布: 2023-08-26 13:09:21
轉載
1742 人瀏覽過

使用 JavaScript 从字符串中提取数字

在 JavaScript 中,有多種方法可以從字串中提取數字。一種方法是使用 match() 方法和正規表示式來搜尋字串中的所有數字。另一種方法是使用 replace() 方法和正規表示式從字串中刪除所有非數字字符,只留下數字。

讓我們藉助一些範例來了解每種方法。

使用 match() 方法和正規表示式

正規表示式是一種搜尋模式,我們可以透過組合多個字母和特殊字元來建立。我們可以使用“/\d /”搜尋模式來搜尋字串中的數字。在‘\d ’搜尋模式中,d代表0到9之間的數字,‘ ’代表找出至少一位數字。

因此,我們可以使用該正規表示式作為 JavaScript 內建 match 方法的參數來搜尋給定字串中的所有數字。

文法

使用者可以按照以下語法從給定字串中提取所有數字。

let str = "Sampll323435 Stringrfd23232ftesd3454!";
let numbers = str.match('/\d+/');
登入後複製

在上面的語法中,我們使用了 match() 方法,它會匹配給定字串中出現的數字。

範例

在此範例中,我們建立了包含數字的字串。之後,我們創建了帶有 g 標誌的正規表示式來匹配字串中所有出現的數字,並將其作為 match() 方法的參數傳遞以在字串中進行匹配

match()方法根據正規表示式匹配傳回包含所有數字的陣列。

<html>
   <body>
      <h3>Using the <i> match () </i> Method and Regular Expression to extract the numbers from the string</h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");

         // defining the string containing the numbers
         let str = "Sampll323435 Stringrfd23232ftesd3454!";
         output.innerHTML = "Original String: " + str + "<br/>";

         // Matching for the numbers using the match() method.
         let numbers = str.match(/\d+/g);

         // numbers is an array of all occurrences of numbers
         
         // if any single number is available in the string, then print numbers
         if (numbers.length > 0) {
            output.innerHTML += "<br> Numbers in the StringL: " + numbers + "<br/>";
         }
      </script>
   </body>
</html>
登入後複製

使用replace()方法和正規表示式

我們可以使用正規表示式來識別數字字元和其他字元。因此,我們將使用正規表示式識別其他字元並將其替換為空字串。這樣,我們就可以去除除數字之外的所有字符,並從字串中提取數字。

文法

使用者可以按照以下語法使用replace()方法從字串中提取數字。

let result = str.replace(/[^0-9]/g,"");
登入後複製

在上面的語法中,str 是一個引用字串,我們要從中提取一個數字。另外,正規表示式[^0-9]表示0到9以外的所有字元。

範例

在下面的範例中,我們使用replace()方法將除數字字元之外的所有字元替換為空字串。我們將正規表示式作為第一個參數傳遞,並將空字串作為第二個參數傳遞。

replace() 方法傳回將數字字元以外的所有字元替換為空字串後的字串。在輸出中,我們可以觀察到它不像 match() 方法那樣傳回數組,而是只傳回單一字串。

<html>
   <body>
      <h3>Using the <i> replace() </i> method and regular expression to extract the numbers from the string</h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         let string = "dnbdj53454 4k54k6j23in k09e30n9923g9 kjm545";
         output.innerHTML = "Original String: " + string + "<br/>";

         // replace all non-numeric characters with empty string
         let result = string.replace(/[^0-9]/g, "");
         output.innerHTML +="<br> Numbers in the string: " + result + "<br/>";
      </script>
   </body>
</html>
登入後複製

使用reduce()方法從字串中提取數字

reduce() 是 JavaScript 內建的函式庫方法。我們可以將字串轉換為字元數組,並對字元數組使用reduce()方法。 reduce() 方法透過對陣列元素執行操作來幫助我們將陣列縮減為單一元素。

在這裡,我們將檢查該字元是否是數字並將其添加到最終元素;否則,我們將添加一個空字串。

文法

使用者可以按照下面的語法使用reduce()方法從字串中提取數字。

let charArray = [...string];
let numbers = charArray.reduce(function (numString, element) {
   let nums = "0123456789";
   if (nums.includes(element)) {
      return numString + element;
   }
   return numString;
},"");
登入後複製

在上面的語法中,我們將reduce方法與charArray一起使用。我們將回調函數作為第一個參數,將空字串作為第二個參數。

演算法

  • 步驟 1 - 使用擴充運算子將字串轉換為字元陣列。

  • 第 2 步 - 使用 charArray 的 reduce() 方法將整個陣列縮減為僅包含數字的單一字串。

  • 第3步 - 將回呼函數當作reduce()方法的第一個參數傳遞,該方法傳回縮減後的字串

  • 步驟4 - 在回呼函數中,傳遞numString 作為第一個參數,它是一個簡化的字串,而element 作為第二個參數,它是一個陣列元素,表示字串的字元字串。

  • 第 5 步 - 在回呼函數中,檢查陣列的字元是否表示該元素在 0 到 9 之間。如果是,則將該字元新增至 numString 並傳回;否則,按原樣傳回 numString。

  • 第6步 - 作為reduce()方法的第二個參數傳遞一個空字串,它是numString的初始值。

  • 第 7 步 - 在陣列的完整迭代之後,reduce() 方法傳回 numString 的最終值。

範例

在下面的範例中,我們採用了一個包含數字的字串,並實作了上述演算法以從字串中提取數字。

<html>
   <body>
      <h3>Using the <i>reduce() </i>method to extract the numbers from the string</h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         let string = "34gr345fr45";
         output.innerHTML += "Original String: " + string + "<br/>";
         let charArray = [...string];
         let numbers = charArray.reduce(function (numString, element) {
            let nums = "0123456789";
            if (nums.includes(element)) {
               return numString + element;
            }
            return numString;
         }, "");
         output.innerHTML +="<br> Number in the String: " + numbers + "<br/>";
      </script>
   </body>
</html>
登入後複製

在本教程中,我们讨论了从给定字符串中提取数字的三种方法。第一种方法是使用 match() 方法和正则表达式来搜索字符串中的所有数字。第二种方法使用 replace() 方法和正则表达式从字符串中删除所有非数字字符,只留下数字。第三种方法是使用reduce()includes()方法。仔细考虑哪种方法最适合特定情况非常重要。

以上是使用 JavaScript 從字串中提取數字的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板