javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript电话号码格式化

JavaScript电话号码格式化的多种实现方式

作者：PW

本文希望通过一道简单的题目,让刚接触JavaScript的新手们了解一个合格的前端程序员需要具备哪些素质,文章给大家介绍了JavaScript电话号码格式化的多种实现方式,感兴趣的小伙伴跟着小编一起来看看吧

推特经典面试题：

编写一个函数，[1,2,3,4,5,6,7,8,9,0] return "(123) 456-7890"电话号码。

方法一：字符串拼接

这是最直接的方法，通过手动拼接每个部分来形成电话号码。相信不少小白都是通过方式解答这道题的，但是真正的高手是绝不会满足于用最粗暴的方法解答一道题的，让我们看看咱们还能玩出什么花样吧~

function getPhoneNum(arr) {
   return "(" + arr[0] + arr[1] + arr[2] + ") " + arr[3] + arr[4] + arr[5] + "-" + arr[6] + arr[7] + arr[8] + arr[9];
}

console.log(getPhoneNum([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));

字符串拼接更好的写法：

function createPhoneNumber(numbers) {
    const part1 = numbers.slice(0, 3).join('');
    const part2 = numbers.slice(3, 6).join('');
    const part3 = numbers.slice(6, 10).join('');
    return `(${part1}) ${part2}-${part3}`;
}

console.log(createPhoneNumber([1,2,3,4,5,6,7,8,9,0])); // 输出: (123) 456-7890

这种方法利用了ES6的模板字符串特性，同时使用数组的slice方法来提取需要的部分。不难看出，es6的表达是更加语义化的，它不像普通的字符串拼接那样机械而粗暴。对比两种写法不难看出返回的结果多了单引号并把+替换成了$，下面来讲讲ES6的模板字符串。

模版字符串

ES6模板字符串（也称为模板字面量）提供了一种新的方式来创建字符串，它们使用反引号（ ）而不是单引号（' '）或双引号（" "）。模板字符串带来了许多便利和增强功能，特别是当你需要在字符串中嵌入表达式或变量时。以下是使用 $ 符号（用于插值）的几个主要好处：

1. 多行字符串

const message = `这是一个
跨越
多行的
字符串`;
console.log(message);
// 输出:
// 这是一个
// 跨越
// 多行的
// 字符串

2. 变量插值

const name = "Alice";
const age = 30;
const message = `我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(message); // 输出: 我的名字是 Alice，我今年 30 岁。

3. 表达式插值

const a = 5;
const b = 10;
const result = `a + b 的结果是 ${a + b}`;
console.log(result); // 输出: a + b 的结果是 15

4. 可读性和简洁性

// 传统方式
const greeting = "Hello, " + name + "! You are " + age + " years old.";

// 模板字符串
const greeting = `Hello, ${name}! You are ${age} years old.`;

5. 标签模板

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str + (values[i] || '');
  });
  return `<span style="color: red;">${result}</span>`;
}

const name = "Bob";
const age = 25;
const message = highlight`My name is ${name}, and I am ${age} years old.`;
console.log(message);
// 输出: <span style="color: red;">My name is Bob, and I am 25 years old.</span>

方法二：for循环遍历数组和replace方法

function getPhoneNum(arr){
  let format = "(xxx) xxx-xxxx"
  for (let i = 0; i < arr.length; i++) {
    format = format.replace("x", arr[i])
  }
  return format
}
console.log(getPhoneNum([1,2,3,4,5,6,7,8,9,0]));

该方法用字符串变量 format确定了格式 "(xxx) xxx-xxxx"。再用for循环遍历让其中每个 x 将会被 arr 数组中的相应数字替换。对比字符串拼接这种方法的可读性要明显强的多，可以极端地试想一下，如果输入的数组有几百甚至几千个数字，使用字符串拼接写出来的代码会非常宽！并且写起来也非常累。

方法三：使用join和正则表达式

这种方法首先将所有数字连接成一个字符串，然后使用正则表达式插入所需的分隔符。

function createPhoneNumber(numbers) {
    const phoneNumber = numbers.join('');
    return phoneNumber.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
}

console.log(createPhoneNumber([1,2,3,4,5,6,7,8,9,0]));

这种方法的优势在于代码的简洁性和较好的性能，尽管对于初学者它的表达不太直观，但是是否能写出简洁性能强的代码是区分大佬和普通人的一个重要指标。

结语

以上三种方法都可以达到相同的效果，选择哪种方法主要取决于个人偏好或具体场景的需求。例如，如果你希望代码更加简洁，可能会倾向于使用方法三；而如果你更看重代码的可读性，可能就会选择方法一或方法二。

以上就是JavaScript电话号码格式化的多种实现方式的详细内容，更多关于JavaScript电话号码格式化的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文