快捷導(dǎo)航

JavaScript電話號(hào)碼格式化的多種實(shí)現(xiàn)方式

更新時(shí)間：2024年11月22日 08:36:14 作者：PW

本文希望通過一道簡(jiǎn)單的題目,讓剛接觸JavaScript的新手們了解一個(gè)合格的前端程序員需要具備哪些素質(zhì),文章給大家介紹了JavaScript電話號(hào)碼格式化的多種實(shí)現(xiàn)方式,感興趣的小伙伴跟著小編一起來看看吧

推特經(jīng)典面試題：

編寫一個(gè)函數(shù)，[1,2,3,4,5,6,7,8,9,0] return "(123) 456-7890"電話號(hào)碼。

方法一：字符串拼接

這是最直接的方法，通過手動(dòng)拼接每個(gè)部分來形成電話號(hào)碼。相信不少小白都是通過方式解答這道題的，但是真正的高手是絕不會(huì)滿足于用最粗暴的方法解答一道題的，讓我們看看咱們還能玩出什么花樣吧~

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的模板字符串特性，同時(shí)使用數(shù)組的slice方法來提取需要的部分。不難看出，es6的表達(dá)是更加語義化的，它不像普通的字符串拼接那樣機(jī)械而粗暴。對(duì)比兩種寫法不難看出返回的結(jié)果多了單引號(hào)并把+替換成了$，下面來講講ES6的模板字符串。

模版字符串

ES6模板字符串（也稱為模板字面量）提供了一種新的方式來創(chuàng)建字符串，它們使用反引號(hào)（）而不是單引號(hào)（' '）或雙引號(hào)（" "）。模板字符串帶來了許多便利和增強(qiáng)功能，特別是當(dāng)你需要在字符串中嵌入表達(dá)式或變量時(shí)。以下是使用 $ 符號(hào)（用于插值）的幾個(gè)主要好處：

1. 多行字符串

模板字符串可以跨越多行，而不需要使用轉(zhuǎn)義字符 `` 或連接符 +。

const message = `這是一個(gè)
跨越
多行的
字符串`;
console.log(message);
// 輸出:
// 這是一個(gè)
// 跨越
// 多行的
// 字符串

2. 變量插值

使用 ${} 語法可以在字符串中直接插入變量或表達(dá)式，而不需要使用字符串拼接。

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

3. 表達(dá)式插值

不僅可以插入變量，還可以插入任何有效的 JavaScript 表達(dá)式。

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

4. 可讀性和簡(jiǎn)潔性

模板字符串使代碼更易讀和簡(jiǎn)潔，特別是在處理復(fù)雜的字符串拼接時(shí)。

// 傳統(tǒng)方式
const greeting = "Hello, " + name + "! You are " + age + " years old.";

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

5. 標(biāo)簽?zāi)０?/h4>

模板字符串支持標(biāo)簽?zāi)０澹@是一種高級(jí)功能，允許你在模板字符串前面加上一個(gè)函數(shù)名，該函數(shù)會(huì)處理模板字符串。

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循環(huán)遍歷數(shù)組和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循環(huán)遍歷讓其中每個(gè) x 將會(huì)被 arr 數(shù)組中的相應(yīng)數(shù)字替換。對(duì)比字符串拼接這種方法的可讀性要明顯強(qiáng)的多，可以極端地試想一下，如果輸入的數(shù)組有幾百甚至幾千個(gè)數(shù)字，使用字符串拼接寫出來的代碼會(huì)非常寬！并且寫起來也非常累。

方法三：使用join和正則表達(dá)式

這種方法首先將所有數(shù)字連接成一個(gè)字符串，然后使用正則表達(dá)式插入所需的分隔符。

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]));

這種方法的優(yōu)勢(shì)在于代碼的簡(jiǎn)潔性和較好的性能，盡管對(duì)于初學(xué)者它的表達(dá)不太直觀，但是是否能寫出簡(jiǎn)潔性能強(qiáng)的代碼是區(qū)分大佬和普通人的一個(gè)重要指標(biāo)。