Rumah > Artikel > hujung hadapan web > Bagaimana untuk menulis nombor mudah alih dengan cara antarabangsa menggunakan JavaScript?

Bagaimana untuk menulis nombor mudah alih dengan cara antarabangsa menggunakan JavaScript?

WBOYke hadapan: 2023-08-25 13:41:111647semak imbas

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

Apabila anda mempunyai pelawat dari seluruh dunia di laman web anda, sebaiknya anda memaparkan maklumat seperti nombor telefon mudah alih mengikut piawaian antarabangsa. Jadi mereka mudah difahami.

Kami boleh mewakili nombor telefon bimbit secara antarabangsa menggunakan Format Penomboran Telekomunikasi Awam Antarabangsa. Selain itu, ia diwakili dalam format "E-164".

Kami telah memberikan sintaks berikut untuk menulis nombor mudah alih dalam cara antarabangsa.

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

Pengguna dapat melihat bahawa nombor telefon antarabangsa mengandungi "+" di hadapan mereka dan "kod negara" selepasnya, dan nombor telefon tempatan mengikut kod negara.

Di sini, kami akan menggunakan kaedah ungkapan biasa dan padanan() untuk menukar nombor telefon mudah alih dalam cara antarabangsa menggunakan JavaScript.

Tatabahasa

Pengguna boleh mengikut sintaks berikut untuk menukar nombor telefon mudah alih kepada format standard antarabangsa.

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

Dalam sintaks di atas, kami telah menulis ungkapan biasa untuk memadankan nombor telefon

kaedah padanan mengembalikan susunan semua padanan. Untuk padanan yang sah, ia mengembalikan empat elemen. Elemen pertama ialah keseluruhan nombor telefon 3 digit, elemen kedua ialah tiga digit pertama nombor telefon, elemen ketiga ialah tiga digit tengah nombor telefon dan elemen keempat ialah empat digit terakhir nombor telefon yang sah. nombor.

Ekspresi biasa dijelaskan

^ − Ini adalah permulaan ungkapan biasa.
(d{3}) - Ia mewakili tiga digit pertama.
(d{3}) - mewakili tiga digit tengah.
(d{4}$) - Ia mewakili empat digit terakhir.

Contoh

Dalam contoh di bawah, kami telah menambah input HTML nombor jenis. Pengguna boleh memasukkan nombor telefon bimbit 10 digit yang sah. Apabila pengguna mengklik butang hantar, ia melaksanakan fungsi writeInternationalNumber(). Kami menggunakan ungkapan biasa di atas dalam fungsi untuk memadankan nilai input dan mendapatkan nilai yang dipadankan dalam format tatasusunan.

Selepas itu, kami menggabungkan nilai tatasusunan ke dalam satu rentetan untuk menulis nombor mudah alih mengikut piawaian antarabangsa.

<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>

Contoh

Dalam contoh di bawah, kami telah mencipta senarai lungsur kod negara menggunakan nilainya. Pengguna boleh memilih mana-mana negara dan menulis nombor telefon 10 digit dalam kotak input. Apabila pengguna menekan butang, ia melaksanakan fungsi cellNumberWithCountryCode(), yang mendapat nilai kod negara dan nombor telefon yang dipilih. Selepas itu, kami mencipta rentetan seperti yang ditunjukkan dalam contoh di atas untuk menulis nombor mudah alih antarabangsa yang dimasukkan.

<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>

Pengguna belajar menyusun nombor telefon mudah alih mengikut piawaian antarabangsa. Kami menggunakan ungkapan biasa untuk mengesahkan nombor mudah alih. Jika nombor telefon itu sah, kami akan memaparkannya di peringkat antarabangsa bersama-sama dengan kod negara yang dipilih.

Atas ialah kandungan terperinci Bagaimana untuk menulis nombor mudah alih dengan cara antarabangsa menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menetapkan lebar segitiga menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan lebar segitiga menggunakan FabricJS?

Artikel berkaitan

Lihat lagi