近期在項目開發中，遇到了對數據進行格式化的需求。由于從數據庫查詢出的結果是字符串類型，而在圖形展示中需要使用數值類型，直簡單填充字符串會導致圖形無法正常顯示；同時，圖形要求數據保留三位小數，因此需要進

近期在項目開發中，遇到了對數據進行格式化的需求。由于從數據庫查詢出的結果是字符串類型，而在圖形展示中需要使用數值類型，直簡單填充字符串會導致圖形無法正常顯示；同時，圖形要求數據保留三位小數，因此需要進行相應的操作來確保圖形展示的準確性。下面將通過一個實例來說明如何實現這一功能。

第一步：創建HTML靜態頁面

首先，在新建的HTML文件中修改title標簽內容，然后在body標簽內添加一個div，并設置div的樣式。

```html

```

第二步：添加文本框和按鈕

在div中添加一個文本框和一個按鈕，并為按鈕添加點擊事件。

```javascript

```

第三步：編寫點擊事件函數

在script標簽中編寫點擊事件函數，對輸入的數字進行格式化處理。

```javascript

function formatNumber() {

let input ('inputNumber').value;

let formattedNumber parseFloat(input).toFixed(3);

('result').innerText isNaN(formattedNumber) ? 'NAN' : formattedNumber;

}

```

第四步：運行并測試

運行HTML頁面，在瀏覽器中查看效果。嘗試在文本框中輸入數字并點擊按鈕查看格式化結果，如果未輸入任何字符則會顯示“NAN”。

第五步：添加輸入判斷

為了避免出現問題，在格式化數據之前先判斷輸入的變量是否為空，如果為空則設為0。

```javascript

function formatNumber() {

let input ('inputNumber').value;

if (input null || input '') {

input 0;

}

let formattedNumber parseFloat(input).toFixed(3);

('result').innerText isNaN(formattedNumber) ? 'NAN' : formattedNumber;

}

```

第六步：保留三位小數

若輸入的是浮點數，則需要在格式化后調用toFixed(3)方法以保留三位小數。

```javascript

let formattedNumber parseFloat(input).toFixed(3);

```

第七步：驗證結果

再次運行靜態頁面，在文本框中輸入不同的數字進行測試，查看結果是否符合預期。通過以上步驟，我們成功地實現了數值格式化并保留小數的功能。