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

 更新时间:2024年11月22日 08:36:14   作者: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. 表达式插值

  • 不仅可以插入变量,还可以插入任何有效的 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电话号码格式化的多种实现方式的详细内容,更多关于JavaScript电话号码格式化的资料请关注脚本之家其它相关文章!

相关文章

  • 利用JavaScript实现的10种排序算法总结

    利用JavaScript实现的10种排序算法总结

    这篇文章主要介绍了利用JavaScript实现的十种排序算法,主要介绍了冒泡,选择,插入,希尔,归并,快速,堆排,计数,桶排和基数,有感兴趣的小伙伴可以参考阅读本文
    2023-05-05
  • JS实现随机点名器

    JS实现随机点名器

    这篇文章主要为大家详细介绍了JS实现随机点名器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • javascript实现点击后变换按钮显示文字的方法

    javascript实现点击后变换按钮显示文字的方法

    这篇文章主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • JS+CSS实现实用的单击输入框弹出选择框的方法

    JS+CSS实现实用的单击输入框弹出选择框的方法

    这篇文章主要介绍了JS+CSS实现实用的单击输入框弹出选择框的方法,实例分析了javascript操作select及button的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 微信小程序实现经典window扫雷游戏

    微信小程序实现经典window扫雷游戏

    这篇文章主要为大家详细介绍了微信小程序实现经典window扫雷游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JavaScript ES6 Class类全方位进阶指南

    JavaScript ES6 Class类全方位进阶指南

    在ES6中class(类)作为对象的模板被引入,可以通过class关键字定义类,这篇文章主要介绍了JavaScript ES6 Class类全方位进阶指南的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-04-04
  • Javascript中的Callback方法浅析

    Javascript中的Callback方法浅析

    这篇文章主要介绍了Javascript中的Callback方法浅析,本文讲解了什么是callback、Javscript Callback、Callback是什么、Callback实例等内容,需要的朋友可以参考下
    2015-03-03
  • zeroclipboard 单个复制按钮和多个复制按钮的实现方法

    zeroclipboard 单个复制按钮和多个复制按钮的实现方法

    最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们
    2014-06-06
  • JS 用6N±1法求素数 实例教程

    JS 用6N±1法求素数 实例教程

    显然,当N≥1时,6N,6N+2,6N+3,6N+4都不是素数,只有形如6N+1和6N+5的自然数有可能是素数。所以,除了2和3之外,所有的素数都可以表示成6N±1的形式(N为自然数)。
    2009-10-10
  • Bootstrap每天必学之栅格系统(布局)

    Bootstrap每天必学之栅格系统(布局)

    Bootstrap每天必学之栅格系统,小编对Bootstrap栅格系统(布局)也很陌生,特分享整理这篇文章,感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论