JavaScript电话号码格式化：字符串拼接、模板字符串与正则表达式详解

推特经典面试题：

编写一个函数，输入包含数字的数组 [1,2,3,4,5,6,7,8,9,0]，要求返回格式化的字符串 "(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和正则表达式

此方案首先利用 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电话号码格式化的资料请关注本站其它相关文章！

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