JS格式化大全

隨着互聯網的飛速發展，客戶端的JS開發變得越來越重要，JS格式化在項目開發過程中也顯得越來越重要，它可以優化項目代碼邏輯、提升開發效率，在項目開發中的重要性不可忽視。

一、JS格式化國際時間

使用JS格式化時間是前端開發過程中常用的功能之一，格式化國際時間的話需要使用到JS中的Date函數。最常見的格式化方式是將時間轉為字符串，下面是一個樣例代碼：

let date = new Date();
console.log(date.toUTCString());
// 輸出結果：Thu, 03 Sep 2020 09:07:17 GMT

toUTCString()函數將時間轉為國際標準時間格式，輸出結果為當前的格林威治標準時間。

還有很多其他的日期時間格式，如toLocaleDateString()、toLocaleTimeString()等等。這些函數可以根據你的需求來選擇使用。

二、JS格式化時間格式

在項目開發過程中可能會需要格式化不同的時間格式，比如將時間轉換為“年-月-日 時:分:秒”的形式。使用JS的Date函數便可輕鬆實現，下面是樣例代碼：

 function addZero(n) {
        return n < 10 ? '0' + n : '' + n;    //小於10的數前面加'0'，否則返回原數
    }

    function formatTime(time) {
        const date = new Date(time);
        const year = date.getFullYear();
        const month = addZero(date.getMonth() + 1);
        const day = addZero(date.getDate());
        const hour = addZero(date.getHours());
        const minute = addZero(date.getMinutes());
        const second = addZero(date.getSeconds());
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }

    console.log(formatTime(1599114256000));
    // 輸出結果：2020-09-03 14:50:56

以上代碼的思路是，將時間字符串的年月日、時分秒分別提取出來，並在進行格式化之前將小於10的數前面補’0’。

三、JS格式化XML

XML（可擴展標記語言）是用來描述數據的一種標記語言，而將XML格式化可以使其更便於閱讀和解析。使用JS格式化XML可以使用XMLSerializer對象，樣例代碼如下：

const xmlString = `John Smith`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

const serializer = new XMLSerializer();
console.log(serializer.serializeToString(xmlDoc));
// 輸出結果：John Smith

以上代碼的思路是：將需要格式化的XML字符串使用DOMParser對象將其解析為XML DOM，再使用XMLSerializer對象將XML DOM轉成字符串形式的XML，並輸出到控制台。

四、JS格式化JSON

像XML一樣，格式化JSON字符串可以使其更容易閱讀和解析。JS中也可以使用JSON對象來進行格式化，樣例代碼如下：

let jsonStr = '{"name": "小明", "age":18, "sex":"男", "hobby": ["game", "sport", "reading"]}';

let jsonObj = JSON.parse(jsonStr);
let prettyJson = JSON.stringify(jsonObj, null, 4);

console.log(prettyJson);
// 輸出結果為格式化後的JSON字符串

以上代碼的思路是：首先將需要格式化的json字符串轉換為JSON對象，再使用JSON.stringify()函數將JSON字符串轉換為格式化後的JSON字符串輸出到控制台。

五、JS格式化日期

在JS中，將日期格式化為“年-月-日”、“月/日/年”等格式很常見。下面是一個格式化為“年-月-日”的演示代碼：

function formatDate(date) {
        const y = date.getFullYear();
        const m = date.getMonth() + 1;
        const d = date.getDate();
        return `${y}-${m}-${d}`;
    }

console.log(formatDate(new Date()));
// 輸出結果：2020-09-03

以上代碼的思路是：首先將日期中的年月日提取出來，然後拼接成需要格式化的形式。

六、JS格式化時間戳

在JS中，將時間戳格式化為“年-月-日”、“月/日/年”等格式也是很常見的操作。下面是一個格式化為“年-月-日”的演示代碼：

function formatTimeStamp(timeStamp) {
        const date = new Date(timeStamp);
        const y = date.getFullYear();
        const m = date.getMonth() + 1;
        const d = date.getDate();
        return `${y}-${m}-${d}`;
    }

console.log(formatTimeStamp(1599114256000));
// 輸出結果：2020-09-03

以上代碼的思路與格式化日期的代碼類似，只需要將傳入的時間戳用Date對象轉換成日期即可。

七、JS格式化工具

在JS開發中，我們可能需要使用一些工具來輔助我們進行格式化，比如Lodash、Moment.js等。下面我們來演示一下如何使用Moment.js來格式化時間：

let time = '2020-09-03 15:11:36';
let momentTime = moment(time).format('YYYY-MM-D h:mm:ss');

console.log(momentTime);
// 輸出結果：2020-09-3 3:11:36

以上代碼的思路是：首先使用moment()函數將時間字符串轉化為Moment對象，然後使用format()函數將其格式化為需要的格式，最後輸出到控制台。

八、JS格式化金額

在處理金錢交易時，我們需要對金額進行格式化，比如添加千位分隔符，保留兩位小數等等。下面是一個將金額格式化為千位分隔符+兩位小數的演示代碼：

function formatMoney(money) {
        let left = money.split('.')[0];  // 獲取整數部分
        let right = money.split('.')[1];  // 獲取小數部分
        left = left.split('').reverse().reduce((prev, next, index) => {    // 讓整數部分每3位添加一個逗號
            return ((index % 3) ? next : (next + ',')) + prev
        });
        return left + '.' + right;
    }

console.log(formatMoney('1234567890.999'));
// 輸出結果：1,234,567,890.99

以上代碼的思路是：首先將金額分割為整數部分和小數部分，然後對整數部分每3位數字添加一個逗號，並將整數部分和小數部分重新拼接成需要格式化的形式。

九、JS格式化金額還原

在有些情況下，我們需要對格式化後的金額進行還原，去掉千位分隔符等等。下面是一個將格式化後的金額還原為數字形式的演示代碼：

function unFormatMoney(money) {
        return parseFloat(money.replace(/\,/g, ''));
    }

console.log(unFormatMoney('1,234,567,890.99'));
// 輸出結果：1234567890.99

以上代碼的思路是：使用replace()函數將金額中的逗號去掉，之後再使用parseFloat()函數將其轉換為數字形式。

以上便是JS格式化的各個方面的介紹，不同的開發需求可能需要使用到上述的不同功能，希望這些代碼能夠對你在項目開發過程中有所幫助。