Vue自定義指令實現(xiàn)對數(shù)字進行千分位分隔

更新時間：2024年02月20日 08:28:54 作者：JYeontu

對數(shù)字進行千分位分隔后展示應該是大部分同學都做過的功能了吧,常規(guī)的做法通常是編寫一個工具函數(shù)來對數(shù)據(jù)進行轉換,那么我們可不可以通過vue指令來實現(xiàn)這一功能呢,下面我們就來探索一下呢

說在前面

對數(shù)字進行千分位分隔后展示應該是大部分同學都做過的功能了吧，常規(guī)的做法通常是編寫一個工具函數(shù)來對數(shù)據(jù)進行轉換，那么我們可不可以通過vue指令來實現(xiàn)這一功能呢？

效果展示

實現(xiàn)原理

非輸入框

非輸入框我們只需要對其展示進行處理，我們可以判斷綁定元素的innerHTML是否不為空，不為空的話則直接對其innerHTML內容進行格式化。

export default {
    bind: function (el, binding) {
        const separator = binding.value || ",";
        if (el.innerHTML) {
            el.innerHTML = addThousandSeparator(el.innerText, separator);
        }
    },
};

輸入框

對于輸入框，我們希望其有以下功能：

1、輸入的時候去掉分隔符

這里我們只需要監(jiān)聽元素的聚焦(focus)事件即可，取到元素的值，將其分隔符去掉后重新賦值。

el.addEventListener("focus", (event) => {
    const value = event.target.value;
    event.target.value = deleteThousandSeparator(value, separator);
});

2、輸入完成后添加分隔符

這里我們只需要監(jiān)聽元素的失焦(blur)事件即可，取到元素的值，對其進行添加分隔符處理后重新賦值。

el.addEventListener("blur", (event) => {
    const value = event.target.value;
    event.target.value = addThousandSeparator(value, separator);
});

千分位分隔函數(shù)

function addThousandSeparator(num, separator = ",") {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
}

num.toString(): 將輸入的數(shù)字 num 轉換為字符串，以便后續(xù)處理。

.replace(/\B(?=(\d{3})+(?!\d))/g, separator): 這里使用了正則表達式進行替換操作。具體解釋如下：

\B: 表示非單詞邊界，用于匹配不在單詞邊界處的位置。
(?=(\d{3})+(?!\d)): 使用正向預查來匹配每三位數(shù)字的位置，但不匹配末尾不足三位的數(shù)字。
(\d{3})+: 匹配連續(xù)的三位數(shù)字。
separator: 作為參數(shù)傳入的分隔符，默認為 ,。
g: 表示全局匹配，即匹配所有滿足條件的位置。

這樣，通過正則表達式的替換功能，在數(shù)字字符串中的每三位數(shù)字之間插入指定的千位分隔符，從而實現(xiàn)千位分隔符的添加。

去掉千分位分隔

function deleteThousandSeparator(numberString, separator = ",") {
    return numberString.replace(new RegExp(separator, "g"), "");
}

直接將字符串中的分隔符全部替換為空即可。

完整代碼

function addThousandSeparator(num, separator = ",") {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
}
function deleteThousandSeparator(numberString, separator = ",") {
    return numberString.replace(new RegExp(separator, "g"), "");
}
export default {
    bind: function (el, binding) {
        const separator = binding.value || ",";
        if (el.innerHTML) {
            el.innerHTML = addThousandSeparator(el.innerText, separator);
        }
        el.addEventListener("focus", (event) => {
            const value = event.target.value;
            event.target.value = deleteThousandSeparator(value, separator);
        });
        el.addEventListener("blur", (event) => {
            const value = event.target.value;
            event.target.value = addThousandSeparator(value, separator);
        });
    },
};