首頁 >web前端 >js教程 >如何使用 JavaScript 以國際方式撰寫手機號碼？

如何使用 JavaScript 以國際方式撰寫手機號碼？

WBOY轉載: 2023-08-25 13:41:111787瀏覽

如何使用 JavaScript 以国际方式编写手机号码？

當您的網站上有來自世界各地的訪客時，最好根據國際標準顯示手機號碼等資訊。所以他們很容易理解。

我們可以使用國際公共電信編號格式以國際方式表示手機號碼。此外，它以“E-164”格式表示。

我們給出了以下語法，以國際方式編寫手機號碼。

[+] [country code] [local phone number]

用戶可以看到國際電話號碼前麵包含“ ”，後麵包含“國家代碼”，國家代碼後麵包含本地電話號碼。

這裡，我們將使用正規表示式和 match() 方法，使用 JavaScript 以國際方式轉換手機號碼。

文法

使用者可以依照以下語法將手機號碼轉換為國際標準格式。

let reg = /^(\d{3})(\d{3})(\d{4})$/;
let array = number.match(reg);

在上面的語法中，我們寫了正規表示式來匹配電話號碼

match 方法傳回所有符合項目的陣列。對於有效匹配，它會傳回四個元素。第一個元素是整個 3 位電話號碼，第二個元素是電話號碼的前三位，第三個元素是電話號碼的中間三位，第四個元素是有效號碼的後四位電話號碼。

正規表示式解釋

^ − 這是正規表示式的開始。
(\d{3}) - 它代表開頭的三位數字。
(\d{3}) - 代表中間的三位數字。
(\d{4}$) - 它代表末尾的四位數。

範例

在下面的範例中，我們新增了數字類型的 HTML 輸入。用戶可以輸入 10 位有效的手機號碼。當使用者點擊提交按鈕時，它會執行 writeInternationalNumber() 函數。我們在函數中使用上面的正規表示式來匹配輸入值並以數組格式獲取匹配值。

之後，我們將陣列值連接到單一字串中，以根據國際標準寫入手機號碼。

<html>
<body>
   <h3>Using the <i> Regular expression </i> to write a cell phone number in an international way in JavaScript </h3>
   <p>Enter phone number:</p>
   <input type = "number" id = "cell">
   <div id = "content"></div>
   <button id = "btn" onclick = "writeInternationalNumber()"> Submit</button>
   <script>
      let content = document.getElementById('content');
      
      // function to write a cell phone number in the international format
      function writeInternationalNumber() {
         let cell = document.getElementById('cell');
         let number = cell.value;
         let reg = /^(\d{3})(\d{3})(\d{4})$/;
         let array = number.match(reg);
         if(array == null) {
            content.innerHTML = "Please enter a valid phone number";
            return;
         }
         let internationalNumber = '+91' + ' (' + array[1] + ') ' + array[2] + '-' + array[3];
         content.innerHTML = "The converted phone number is " + internationalNumber;
      }
   </script>
</body>
</html>

範例

在下面的範例中，我們使用其值建立了國家/地區程式碼的下拉清單。使用者可以選擇任意國家並在輸入框中寫入10位數字的電話號碼。當使用者按下按鈕時，它會執行 cellNumberWithCountryCode() 函數，該函數會取得所選國家代碼和電話號碼的值。之後，我們創建一個如上例所示的字串來寫入輸入的國際手機號碼。

<html>
<body>
   <h3>Using the <i> Regular expression </i> to write a cell phone number in an international way in JavaScript </h3>
   <select name = "country_code" id = "codes">
      <option value = "+91" selected> India (+91) </option>
      <option value = "+355"> Albania (+355) </option> 
      <option value = "+1"> USA (+1) </option>
      <option value = "+43"> Austria (+43) </option>
      <option value = "+86"> China (+86) </option>
      <option value = "+81"> Japan (+81) </option>
      <option value = "+31"> Netherlands (+31) </option>
      <option value = "+263"> Zimbabwe (+263) </option>
   </select>
   <input type = "number" id = "cell"> <br>
   <div id = "content"> </div> <br>
   <button id = "btn" onclick = "cellNumberWithCountryCode()"> Submit</button>
   <script>
      let content = document.getElementById('content');
      
      // function to write a cell phone number in the international format
      function cellNumberWithCountryCode() {
         let cell = document.getElementById('cell');
         let number = cell.value;
         let reg = /^(\d{3})(\d{3})(\d{4})$/;
         
         // get the country code from the dropdown
         let country_code = document.getElementById('codes').value;
         let array = number.match(reg);
         if (array == null) {
            content.innerHTML = "Please enter a valid phone number";
            return;
         }
         let internationalNumber = country_code + ' (' + array[1] + ') ' + array[2] + '-' + array[3];
         content.innerHTML = "The converted phone number is " + internationalNumber; 
      }
   </script>
</body>
</html>

用戶學會了依照國際標準排列手機號碼。我們使用正規表示式來驗證手機號碼。如果電話號碼有效，我們會在國際範圍內顯示該電話號碼以及所選的國家/地區代碼。

以上是如何使用 JavaScript 以國際方式撰寫手機號碼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 設定三角形的寬度？下一篇：如何使用 FabricJS 設定三角形的寬度？

看更多