TypeScript中實現(xiàn)字符串格式化及數(shù)值對齊
更新時間：2025年08月12日 11:05:04 作者：Juchecar
字符串格式化是處理文本展示的常見需求,尤其在需要規(guī)范數(shù)值、日期等數(shù)據(jù)的顯示格式時非常重要,TypeScript可以通過模板字符串、字符串方法和正則表達式組合實現(xiàn)類似功能,包括數(shù)值的左右對齊等場景,本文給大家介紹的非常詳細,需要的朋友可以參考下
引言
字符串格式化是處理文本展示的常見需求，尤其在需要規(guī)范數(shù)值、日期等數(shù)據(jù)的顯示格式時非常重要。TypeScript 雖然沒有像 Python 的format()函數(shù)那樣原生提供一站式格式化工具，但可以通過模板字符串、字符串方法和正則表達式組合實現(xiàn)類似功能，包括數(shù)值的左右對齊等場景。
一、基礎字符串格式化（類似 Python f-string）
Python 中常用f-string或str.format()進行變量嵌入，TypeScript 的模板字符串（反引號+${}）是對等實現(xiàn)，支持直接嵌入變量和表達式。
示例：基本變量嵌入
// 定義變量
const name: string = "Alice";
const age: number = 30;
const score: number = 95.5;
// 基礎格式化：嵌入變量
const info: string = `${name} is ${age} years old, score: ${score}`;
console.log(info); // 輸出：Alice is 30 years old, score: 95.5
示例：表達式計算
模板字符串中可直接執(zhí)行表達式，類似 Pythonf-string中的{x + y}：
const a: number = 10;
const b: number = 20;
console.log(`Sum: ${a + b}`); // 輸出：Sum: 30
console.log(`Double of ${a}: ${a * 2}`); // 輸出：Double of 10: 20
const price: number = 99.9;
const discount: number = 0.8;
// 計算折后價并保留 2 位小數(shù)
const finalPrice: string = `折后價：${(price * discount).toFixed(2)}元`;
// 輸出："折后價：79.92元"
二、數(shù)值型格式化（保留小數(shù)、千位分隔）
Python 中可用"{:.2f}".format(3.1415)保留小數(shù)，TypeScript 可通過toFixed()、Intl.NumberFormat等方法實現(xiàn)。
1. 保留指定小數(shù)位數(shù)
const pi: number = 3.1415926;
// 保留2位小數(shù)（類似Python "{:.2f}".format(pi)）
console.log(pi.toFixed(2)); // 輸出：3.14（返回字符串類型）
// 保留0位小數(shù)（取整）
console.log(pi.toFixed(0)); // 輸出：3
2. 千位分隔符（數(shù)字格式化）
const largeNum: number = 1234567.89;
// 千位分隔，保留2位小數(shù)（類似Python "{:,.2f}".format(largeNum)）
const formatted: string = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(largeNum);
console.log(formatted); // 輸出：1,234,567.89
三、數(shù)值的左右對齊（固定寬度）
Python 中可用"{:>10d}".format(123)實現(xiàn)右對齊（占 10 個字符寬度），TypeScript 可通過padStart()和padEnd()實現(xiàn)類似的固定寬度對齊。
核心方法：
- padStart(targetLength, padString)：在字符串左側填充指定字符，達到目標長度（右對齊效果）。
- padEnd(targetLength, padString)：在字符串右側填充指定字符，達到目標長度（左對齊效果）。
1. 整數(shù)右對齊（固定寬度）
const num: number = 123;
const width: number = 10; // 總寬度10個字符
// 右對齊：數(shù)字轉(zhuǎn)字符串后，左側補空格（類似Python "{:>10d}".format(123)）
const rightAligned: string = num.toString().padStart(width, ' ');
console.log(`|${rightAligned}|`); // 輸出：| 123|（左側7個空格+123，共10位）
// 需求：將數(shù)值轉(zhuǎn)為 5 位右對齊（不足補零）
const score1: number = 85;
const score2: number = 9;
const score3: number = 95;
// 方法：轉(zhuǎn)字符串后用 padStart(總長度, "0")
const alignRight1: string = score1.toString().padStart(5, "0"); // "00085"
const alignRight2: string = score2.toString().padStart(5, "0"); // "00009"
const alignRight3: string = score3.toString().padStart(5, "0"); // "00095"
console.log([alignRight1, alignRight2, alignRight3].join(" "));
// 輸出："00085 00009 00095"
2. 整數(shù)左對齊（固定寬度）
const num: number = 456;
const width: number = 10;
// 左對齊：數(shù)字轉(zhuǎn)字符串后，右側補空格（類似Python "{:<10d}".format(456)）
const leftAligned: string = num.toString().padEnd(width, ' ');
console.log(`|${leftAligned}|`); // 輸出：|456 |（456+右側7個空格，共10位）
// 需求：將數(shù)值轉(zhuǎn)為 5 位左對齊（不足補空格）
const num1: number = 123;
const num2: number = 4567;
const num3: number = 89;
// 方法：轉(zhuǎn)字符串后用 padEnd(總長度, 填充字符)
const alignLeft1: string = num1.toString().padEnd(5, " "); // "123 "（5位，右補空格）
const alignLeft2: string = num2.toString().padEnd(5, " "); // "4567 "
const alignLeft3: string = num3.toString().padEnd(5, " "); // "89 "
console.log([alignLeft1, alignLeft2, alignLeft3].join("|"));
// 輸出："123 |4567 |89 "
// 需求：根據(jù)數(shù)組中最大數(shù)值的長度，動態(tài)右對齊所有數(shù)值
const numbers: number[] = [12, 345, 6, 7890];
const maxLen: number = Math.max(...numbers.map(n => n.toString().length)); // 最大長度 4
// 生成對齊后的字符串數(shù)組
const aligned: string[] = numbers.map(n =>
n.toString().padStart(maxLen, " ") // 右對齊，補空格
);
console.log(aligned.join(" | "));
// 輸出：" 12 | 345 | 6 | 7890"
3. 帶小數(shù)的數(shù)值對齊
const decimalNum: number = 78.9;
const width: number = 10;
// 先保留1位小數(shù)，再右對齊
const formattedNum: string = decimalNum.toFixed(1); // "78.9"
const rightAlignedDecimal: string = formattedNum.padStart(width, ' ');
console.log(`|${rightAlignedDecimal}|`); // 輸出：| 78.9|（左側6個空格+78.9，共10位）
const population: number = 1234567;
// 通用千位分隔符（英文環(huán)境）
const withCommas: string = population.toLocaleString(); // "1,234,567"
// 自定義分隔符（如中文環(huán)境）
const withChineseCommas: string = population.toLocaleString("zh-CN"); // "1,234,567"（效果相同）
const rate: number = 0.755;
// 保留 1 位小數(shù)的百分比
const percentage: string = (rate * 100).toFixed(1) + "%"; // "75.5%"
const amount: number = 1234.56;
// 美元格式（英文環(huán)境）
const usd: string = amount.toLocaleString("en-US", {
style: "currency",
currency: "USD",
}); // "$1,234.56"
// 人民幣格式（中文環(huán)境）
const cny: string = amount.toLocaleString("zh-CN", {
style: "currency",
currency: "CNY",
}); // "￥1,234.56"
4. 自定義填充字符（非空格）
const num: number = 99;
const width: number = 8;
// 用0填充左側（右對齊，類似Python "{:0>8d}".format(99)）
const zeroPadded: string = num.toString().padStart(width, '0');
console.log(zeroPadded); // 輸出：00000099（6個0+99，共8位）
/**
* 格式化數(shù)值+單位（右對齊數(shù)值，固定單位寬度）
* @param value 數(shù)值
* @param unit 單位（如 "ms"）
* @param totalWidth 總寬度（數(shù)值+單位的總長度）
*/
function formatWithUnit(value: number, unit: string, totalWidth: number): string {
const valueStr: string = value.toString();
const unitStr: string = unit.padStart(3); // 單位固定占3位（如 " ms"）
const totalValueWidth: number = totalWidth - unitStr.length; // 數(shù)值部分可用寬度
return valueStr.padStart(totalValueWidth, " ") + unitStr;
}
// 使用示例
console.log(formatWithUnit(100, "ms", 6)); // " 100ms"（總寬度6：3位數(shù)值+3位單位）
console.log(formatWithUnit(50, "ms", 6)); // " 50ms"
console.log(formatWithUnit(1234, "ms", 8)); // " 1234ms"（總寬度8：4位數(shù)值+3位單位+1空格？需調(diào)整邏輯）
四、綜合案例：表格格式化輸出
模擬 Python 中格式化表格的場景，用 TypeScript 實現(xiàn)列對齊：
// 數(shù)據(jù)
const data = [
{ name: "Apple", price: 5.99, stock: 120 },
{ name: "Banana", price: 2.5, stock: 300 },
{ name: "Orange", price: 3.75, stock: 80 }
];
// 定義各列寬度
const nameWidth = 10;
const priceWidth = 8;
const stockWidth = 6;
// 表頭
console.log(
"Name".padEnd(nameWidth, ' ') +
"Price".padStart(priceWidth, ' ') +
"Stock".padStart(stockWidth, ' ')
);
// 分隔線
console.log('-'.repeat(nameWidth + priceWidth + stockWidth));
// 內(nèi)容行（名稱左對齊，價格和庫存右對齊）
data.forEach(item => {
const name = item.name.padEnd(nameWidth, ' ');
const price = item.price.toFixed(2).padStart(priceWidth, ' ');
const stock = item.stock.toString().padStart(stockWidth, ' ');
console.log(name + price + stock);
});
輸出結果：
Name Price Stock ------------------------ Apple 5.99 120 Banana 2.50 300 Orange 3.75 80
五、與 Python 格式化的對比總結
| 格式化需求 | Python 代碼示例 | TypeScript 代碼示例 |
|---|---|---|
| 變量嵌入 | f"Name: {name}" | ${name}（模板字符串） |
| 保留 2 位小數(shù) | "{:.2f}".format(3.1415) | 3.1415.toFixed(2) |
| 千位分隔符 | "{:,.2f}".format(12345) | new Intl.NumberFormat().format(12345) |
| 右對齊（寬 10） | "{:>10d}".format(123) | 123.toString().padStart(10, ' ') |
| 左對齊（寬 10） | "{:<10d}".format(123) | 123.toString().padEnd(10, ' ') |
| 0 填充右對齊（寬 8） | "{:0>8d}".format(99) | 99.toString().padStart(8, '0') |
通過模板字符串結合padStart()、padEnd()、toFixed()等方法，TypeScript 可以靈活實現(xiàn)各種字符串格式化需求，尤其是數(shù)值的對齊顯示。初學者只需掌握這些基礎方法的組合，就能應對大部分格式化場景。
以上就是TypeScript中實現(xiàn)字符串格式化及數(shù)值對齊的詳細內(nèi)容，更多關于TypeScript字符串格式化及數(shù)值對齊的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了antDesign 自定義分頁樣式的實現(xiàn)代碼，這里用到了自定義指令,如果大家用不到可以按照自己的實際效果開發(fā),本文通過實例代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
今天小編就為大家分享一篇對layui中表單元素的使用詳解。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript實現(xiàn)的反序列化json字符串操作示例
這篇文章主要介紹了JavaScript實現(xiàn)的反序列化json字符串操作,結合實例形式分析了eval與JSON.parse兩種反序列化json字符串的相關操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了js使用setTimeout實現(xiàn)輪循動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了小程序指紋驗證的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了js replace替換字符串同時替換多個方法 的相關資料,需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇解決eclipse中沒有js代碼提示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
關于vite?+?ts?找不到模塊@/xxxx?或其相應的類型聲明問題
這篇文章主要介紹了vite?+?ts?找不到模塊@/xxxx?或其相應的類型聲明,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JavaScript中使用Callback控制流程介紹,本文講解了callback的一些問題和優(yōu)化后的寫法并給出代碼實例,需要的朋友可以參考下2015-03-03
Ajax請求通常不支持瀏覽器的后退按鈕,因為它們是異步的,不會導致頁面重新加載(刷新),但如果你想要用戶能夠通過瀏覽器的后退按鈕回到之前的頁面狀態(tài),你可以通過幾種方法來解決這個問題,感興趣的朋友跟隨小編一起看看吧2024-10-10