Formato de número de teléfono de JavaScript

En este artículo, aprenderemos la mejor manera de formatear el número de teléfono en el código fuente de JavaScript y los beneficios de los números formateados en nuestro código JavaScript.

Formato de número de teléfono en JavaScript

En JavaScript, tenemos múltiples opciones para realizar el formateo de números de manera efectiva. En su mayoría, los desarrolladores usan expresiones regulares y el método predeterminado substr() para formatear números en las aplicaciones.

Usar expresión regular

Usamos RegEx para reemplazar el número de teléfono original con un formato legible por humanos. Por ejemplo, el patrón de expresión regular /(\d{3})(\d{3})(\d{4})/,'$1-$2-$3' puede usarse con el método replace para separar el primero tres dígitos, los siguientes tres dígitos y los últimos cuatro dígitos y concatenarlos con - entre ellos al final.

Sintaxis básica:

let result = phoneNo.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

Código de ejemplo:

function formatNumber(number) {
  console.log('Original number : ' + number);
  let result = number.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
  console.log('Formatted number using regular expression : ' + result);
}

var originalNumber = '4445556678';

formatNumber(originalNumber)

Ejecutar código

Producción :

"Original number : 4445556678"
"Formatted number using regular expression : 444-555-6678"

En el ejemplo fuente de JavaScript anterior, creamos una función formatNumber(), que toma el número como parámetro. Dentro de esa función, imprimimos el número original pasado en los registros usando console.log().

Luego, usamos el método predeterminado de cadena reemplazar () en los números pasados ​​con un patrón de expresión regular. La salida se almacena en una variable separada y se muestra en console.log().

Simplemente inicializamos la cadena de números en el formato original y pasamos ese número en la función formatNumber().

Usa el método substr() en JavaScript

Este método de cadena predeterminado, substr(), se puede utilizar para formatear el número. Podemos dividir la cadena de números en tres porciones diferentes, y luego podemos concatenar todas las porciones con - entre ellas.

Sintaxis básica:

let data = 'hello world'
let result = data.substr(0, 5)  // it will separate "hello" from hello world

Código de ejemplo:

function formatNumber(number) {
  console.log('Original number : ' + number);
  let result = number.substr(0, 3) + '-' + number.substr(3, 3) + '-' +
      number.substr(6, 4);
  console.log('Formatted number using substring method : ' + result);
}
var originalNumber = '6665559978';

formatNumber(originalNumber)

Ejecutar código

Producción :

Original number : 6665559978
Formatted number using substring method : 666-555-9978

En el ejemplo fuente de JavaScript anterior, usamos el método substr() en el número pasado para dividirlo en porciones y usamos la concatenación con el operador + para unir la cadena nuevamente con -.

La salida se almacena en una variable separada y se muestra en console.log(), y se pasa el número en la función formatNumber().