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. 表达式插值

• 不仅可以插入变量，还可以插入任何有效的 JavaScript 表达式。

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特性的熟练运用，相信坚持努力的你终能成为大佬！