วิธีจัดรูปแบบหมายเลขโทรศัพท์ใน JavaScript

Withi Cad Rup Baeb Hmaylekh Thorsaphth Ni Javascript



จำเป็นต้องรักษาข้อมูลให้ปลอดภัยและสอดคล้อง โดยเฉพาะอย่างยิ่งเมื่อพูดถึงหมายเลขโทรศัพท์ เว็บไซต์ที่รวบรวมหมายเลขโทรศัพท์ของผู้ใช้มักประสบปัญหาเกี่ยวกับรูปแบบ ผู้ใช้กรอกข้อมูลด้วยวิธีที่ไม่แน่นอนโดยไม่ได้รักษามาตรฐานไว้ ทำให้การประมวลผลข้อมูลยากสำหรับนักพัฒนาเว็บไซต์ เพื่อหลีกเลี่ยงสถานการณ์ดังกล่าว สามารถใช้ JavaScript เพื่อจัดรูปแบบหมายเลขโทรศัพท์ตามมาตรฐานเฉพาะ

บล็อกนี้จะกล่าวถึงขั้นตอนที่เกี่ยวข้องกับการจัดรูปแบบหมายเลขโทรศัพท์ใน JavaScript







วิธีการจัดรูปแบบหมายเลขโทรศัพท์ใน JavaScript?

ใน JavaScript เพื่อจัดรูปแบบหมายเลขโทรศัพท์ เราจะใช้วิธีต่อไปนี้:



มาเจาะลึกวิธีแรกกันเลย!



วิธีที่ 1: การใช้ RegEx เพื่อจัดรูปแบบหมายเลขโทรศัพท์ใน JavaScript

RegEx ” เป็นชวเลขสำหรับนิพจน์ทั่วไป เป็นคอนเทนเนอร์ของอักขระที่แนะนำรูปแบบการค้นหาที่เกี่ยวข้องกับสตริง จากนั้นแทนที่หรือลบค่าที่มีอยู่ของสตริงด้วยค่าใหม่ตามลำดับ





ไปข้างหน้าและยกตัวอย่างเพื่อทำความเข้าใจว่าการใช้วิธี RegEx สามารถจัดรูปแบบหมายเลขโทรศัพท์ได้อย่างไร

ตัวอย่าง

ในตัวอย่างนี้ เราจะสร้างตัวแปร “ พี ” และกำหนดหมายเลขที่ไม่จัดรูปแบบแบบสุ่ม:



เคยเป็น พี = '+1.234-567.1234' ;

จากนั้นเรียกใช้เมธอดแทนที่ () โดยที่ \D ใช้สำหรับตัวเลขตั้งแต่ [0-9] + เพื่อตรวจจับการซ้ำซ้อนของตัวเลขและ g สำหรับการจับคู่ทั่วโลก จากนั้น ให้เรียกใช้เมธอดแทนที่ () อีกครั้งด้วยลำดับอักขระพิเศษ เช่น (\d{1}) เพื่อตั้งค่าหนึ่งหลัก (\d{3}) เพื่อตั้งค่าสามหลัก และ (\d{4}) เพื่อตั้งสี่หลัก หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับการดำเนินการเหล่านี้ โปรดดูที่ อื่นๆ ของเรา บทความเฉพาะ .

นอกจากนี้ $1 จะเป็นกลุ่มแรก และ + จะเรียงชิดขวาก่อนหน้านั้น $2 จะเป็นกลุ่มที่สองซึ่งอยู่ในวงเล็บ ส่วน $3-$4 จะเป็นกลุ่มที่สามและสี่ที่มีเครื่องหมายยัติภังค์ (-):

พี = หน้า แทนที่ ( /\D+/g , '' ) . แทนที่ ( /(\d{1})(\d{3})(\d{3})(\d{4})/ , '+$1 ($2) $3-$4' ) ;

ตอนนี้พิมพ์ผลลัพธ์โดยใช้บรรทัดด้านล่าง:

คอนโซล บันทึก ( พี ) ;

อย่างที่คุณเห็น เราได้จัดรูปแบบหมายเลขโทรศัพท์เรียบร้อยแล้ว

วิธีที่ 2: การใช้ substr() เพื่อจัดรูปแบบตัวเลขใน JavaScript

ย่อย () ” วิธีการแยกสตริงย่อยจากดัชนีเฉพาะจนถึงดัชนีสิ้นสุดที่กล่าวถึง วิธีนี้สามารถช่วยในการสร้างสตริงย่อยของตัวเลขด้วยรูปแบบและลำดับของอักขระที่เหมาะสม เป็นผลให้หมายเลขที่จัดรูปแบบจะถูกสร้างขึ้น

ไวยากรณ์

สตริง ย่อย ( เริ่ม , จบ )

ที่นี่ “ ย่อย () ” วิธีการจะดึงสตริงย่อยจากที่ระบุ “ เริ่ม ” ดัชนีจนถึง “ จบ ” ดัชนีของสตริงที่กำหนด

ตัวอย่าง 1

ขอแบ่งโปรแกรมออกเป็นสามส่วน ในส่วนแรกเราจะพิจารณาถึงคุณค่า “ p.substr(0, 3) ” เนื่องจาก 0 คือจุดเริ่มต้น และ 3 คือความยาว ในส่วนที่สองค่า “ p.substr(3, 3) ” แสดงว่าตัวเลขจะเริ่มต้นจากตำแหน่งที่ 4 และความยาวจะเป็น 3 ส่วนสุดท้ายมีค่า “ p.substr(6, 4) ” โดยตำแหน่งหลักเริ่มจาก 7 และมีความยาวรวมเป็น 4:

พี = หน้า ย่อย ( 0 , 3 ) + '-' + หน้า ย่อย ( 3 , 3 ) + '-' + หน้า ย่อย ( 6 , 4 ) ;

เอาท์พุต

ตอนนี้ มาลองอีกตัวอย่างหนึ่งเพื่อดูว่าเราจะใส่รหัสประเทศพร้อมกับหมายเลขของเราด้วยวิธีเดียวกันได้อย่างไร

ตัวอย่าง 2

ในตัวอย่างนี้ เราจะใช้สตริง “ str ” และทำให้ “ +1 ” เพื่อเก็บไว้ในนั้น:

เคยเป็น str = '+1' ;

ตอนนี้เราจะกำหนด 1 เป็นจุดเริ่มต้นในค่าแรกของ ' p.substr(1, 3) ” รหัสที่เหลือจะยังคงเหมือนเดิม:

พี = หน้า ย่อย ( 1 , 3 ) + '-' + หน้า ย่อย ( 3 , 3 ) + '-' + หน้า ย่อย ( 6 , 4 ) ;

พิมพ์สตริง str ที่เริ่มต้นใหม่ด้วยสตริง p:

คอนโซล บันทึก ( str , พี ) ;

เอาท์พุต

เราได้เรียนรู้ขั้นตอนการจัดรูปแบบหมายเลขโทรศัพท์ใน JavaScript ด้วยสองวิธีที่แตกต่างกัน

บทสรุป

ในการจัดรูปแบบหมายเลขโทรศัพท์ “ RegEx ' หรือ ' ย่อย () ” ก็สามารถนำไปใช้ได้ โดยการกำหนดนิพจน์ทั่วไป คุณต้องสร้างรูปแบบ และจากนั้นด้วยวิธีการแทนที่ () หมายเลขโทรศัพท์สามารถจัดรูปแบบได้ ในเมธอด substr() สามารถสร้างได้สามส่วน และแต่ละส่วนมีจุดเริ่มต้นและความยาวที่กำหนดไว้ บทความนี้ครอบคลุมวิธีการจัดรูปแบบหมายเลขโทรศัพท์ใน JavaScript