進入 Vue 的世界發現很多好神奇的套件，xe-utils 是我使用後最愛的其中之一，只需要會呼叫使用他，就可以達到想要的邏輯效果，當然也必須要懂些 JavaScript 基本知識，不然還是會有黑人問號的時候。

#套件簡介

xe-utils 是一個 JavaScript 實用函式大倉庫，主要用於操作和處理數據。它通常與 element-ui 一起使用，用於構建 Vue.js 應用程序中的用戶界面。 xe-utils 提供了各種函數，用於任務，如數據格式化、排序、過濾、分頁等，使其在處理 Web 應用程序中的表格數據時非常有用。

xe-utils
https://github.com/x-extends/xe-utils

#安裝流程

npm install xe-utils

#開始方法 && 使用方法

文件提供 2 種開始方法：整包引入和按需引入

整包引入

import _XEUtils_ from 'xe-utils'                   // 整包函式庫引入

const data = [3, 1, 2]
const sortedData = XEUtils.sortBy(data, (item) => item)
console.log(sortedData)                            // [1, 2, 3]

按需引入

import { sortBy } from 'xe-utils';                 // 針對需要的引入

const data = [3, 1, 2]
const sortedData = XEUtils.sortBy(data, (item) => item)
console.log(sortedData)                            // [1, 2, 3]

#應用

xe-utils 很多東西可以參考使用，就算沒有很想用套件也可以用這個套件的思維邏輯建立陣列方法。
以下分享千分位的各種寫法，專案中很常使用的函式：

- 千分位

commafy (num [, options]) 数值千分位分隔符、小数点

使用方法如同文件範例所示，或許你會好奇...原生 JavaScript 也可以完成這個目標，為什麼還要用套件？
老樣子！方法很多種沒有對錯，看開發的選擇！

千分位 - xe-utils

function toThousands(x) {
  return XEUtils.commafy(x);
}

千分位 - 原生 JavaScript (使用在 vue 專案會失效)

function toThousands(x) {
  let parts = x.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return parts.join(".");
}

千分位 - 原生 JavaScript by 威爾豬分享

function toThousands(x) {
  let comma = /\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g;
  return x?.toString()?.replace(comma, ",");
}

千分位 - 原生 JavaScript 內建語法 (傳入的參數一定只能是數字)

function toThousands(x) {
  return x.toLocaleString();
}

Date.prototype.toLocaleString()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString