TypeScript中字符串與數(shù)值、日期時間相互轉(zhuǎn)換的實(shí)現(xiàn)方式
更新時間：2025年08月13日 08:27:25 作者：Juchecar
在 TypeScript 開發(fā)中,字符串、數(shù)值和日期時間是最常用的數(shù)據(jù)類型,它們之間的相互轉(zhuǎn)換是基礎(chǔ)且高頻的操作,對于初學(xué)者來說,掌握這些轉(zhuǎn)換方法能輕松處理數(shù)據(jù)展示、用戶輸入解析等場景,下面詳細(xì)講解具體實(shí)現(xiàn)方式,需要的朋友可以參考下
引言
在 TypeScript 開發(fā)中，字符串、數(shù)值和日期時間是最常用的數(shù)據(jù)類型，它們之間的相互轉(zhuǎn)換是基礎(chǔ)且高頻的操作。對于初學(xué)者來說，掌握這些轉(zhuǎn)換方法能輕松處理數(shù)據(jù)展示、用戶輸入解析等場景。下面詳細(xì)講解具體實(shí)現(xiàn)方式。
一、字符串與數(shù)值型的相互轉(zhuǎn)換
數(shù)值型包括整數(shù)（number）和浮點(diǎn)數(shù)（number，TypeScript 中統(tǒng)一用number類型表示），與字符串的轉(zhuǎn)換是最常見的需求。
1. 字符串轉(zhuǎn)換為數(shù)值（string → number）
（1）轉(zhuǎn)換為整數(shù)
使用parseInt()方法，語法為parseInt(字符串, 基數(shù))，基數(shù)通常為 10（表示十進(jìn)制）。
// 基本用法 const str1: string = "123"; const num1: number = parseInt(str1, 10); console.log(num1); // 輸出：123（類型為number） // 處理帶小數(shù)的字符串（只保留整數(shù)部分） const str2: string = "456.78"; const num2: number = parseInt(str2, 10); console.log(num2); // 輸出：456 // 處理含非數(shù)字字符的字符串（解析到非數(shù)字字符為止） const str3: string = "789abc"; const num3: number = parseInt(str3, 10); console.log(num3); // 輸出：789 // 轉(zhuǎn)換失?。ǚ祷豊aN） const str4: string = "abc123"; const num4: number = parseInt(str4, 10); console.log(num4); // 輸出：NaN（Not a Number）
（2）轉(zhuǎn)換為浮點(diǎn)數(shù)
使用parseFloat()方法，無需指定基數(shù)，直接解析字符串中的浮點(diǎn)數(shù)。
// 基本用法（純小數(shù)） const str1: string = "3.1415"; const num1: number = parseFloat(str1); console.log(num1); // 輸出：3.1415 // 整數(shù)也會被轉(zhuǎn)換為浮點(diǎn)數(shù) const str2: string = "100"; const num2: number = parseFloat(str2); console.log(num2); // 輸出：100 // 處理科學(xué)計數(shù)法 const str3: string = "1e3"; // 1×103 const num3: number = parseFloat(str3); console.log(num3); // 輸出：1000 // 轉(zhuǎn)換失?。ǚ祷豊aN） const str4: string = "not a number"; const num4: number = parseFloat(str4); console.log(num4); // 輸出：NaN
（3）通用轉(zhuǎn)換（自動識別類型）
使用Number()函數(shù)，可直接將字符串轉(zhuǎn)換為對應(yīng)的數(shù)值類型（整數(shù)或浮點(diǎn)數(shù)）。 字符串必須完全符合數(shù)值格式，否則返回 NaN（比 parseInt/parseFloat 更嚴(yán)格）
console.log(Number("123")); // 輸出：123（整數(shù)）
console.log(Number("123.45")); // 輸出：123.45（浮點(diǎn)數(shù)）
console.log(Number("")); // 輸出：0（空字符串特殊處理）
console.log(Number("abc")); // 輸出：NaN（轉(zhuǎn)換失敗）
（4）轉(zhuǎn)換結(jié)果驗(yàn)證
轉(zhuǎn)換可能失?。ǚ祷豊aN），需用isNaN()函數(shù)判斷：
function safeParseNumber(str: string): number | null {
const num = parseFloat(str);
return isNaN(num) ? null : num; // 失敗返回null，成功返回數(shù)值
}
console.log(safeParseNumber("123.45")); // 輸出：123.45
console.log(safeParseNumber("invalid")); // 輸出：null
2. 數(shù)值轉(zhuǎn)換為字符串（number → string）
（1）基本轉(zhuǎn)換
使用toString()方法或模板字符串：
const num1: number = 123;
console.log(num1.toString()); // 輸出："123"（字符串類型）
const num2: number = 3.14;
console.log(`${num2}`); // 輸出："3.14"（模板字符串轉(zhuǎn)換）
（2）指定小數(shù)位數(shù)
結(jié)合toFixed()方法，轉(zhuǎn)換時保留指定小數(shù)位數(shù)（返回字符串）：
const num: number = 5.678; console.log(num.toFixed(2)); // 輸出："5.68"（保留2位小數(shù)，四舍五入） console.log(num.toFixed(0)); // 輸出："6"（保留0位小數(shù)）
二、字符串與日期時間的相互轉(zhuǎn)換
日期時間在 TypeScript 中用Date對象表示，與字符串的轉(zhuǎn)換需注意格式兼容性。
1. 字符串轉(zhuǎn)換為日期時間（string → Date）
Date構(gòu)造函數(shù)可直接解析特定格式的字符串，推薦使用ISO 8601 標(biāo)準(zhǔn)格式（如YYYY-MM-DD、YYYY-MM-DDTHH:mm:ss）。
（1）解析 ISO 格式字符串
// 僅日期（YYYY-MM-DD）
const dateStr1: string = "2024-06-15";
const date1: Date = new Date(dateStr1);
console.log(date1.toLocaleDateString()); // 輸出：2024/6/15（本地格式）
// 日期+時間（YYYY-MM-DDTHH:mm:ss）
const dateTimeStr: string = "2024-06-15T14:30:00";
const dateTime: Date = new Date(dateTimeStr);
console.log(dateTime.toLocaleString()); // 輸出：2024/6/15 14:30:00
const iso = "2024-06-01T09:05:07Z";
const d = new Date(iso);
if (isNaN(d.getTime())) throw new Error("日期非法");
// 格式 1：ISO 8601 標(biāo)準(zhǔn)格式（推薦，兼容性最好）
const isoStr: string = "2024-05-20T14:30:45";
const date1: Date = new Date(isoStr); // Mon May 20 2024 22:30:45 GMT+0800
// 格式 2：常見字符串（如 "YYYY/MM/DD HH:mm:ss"）
const commonStr: string = "2024/05/20 14:30:45";
const date2: Date = new Date(commonStr); // 同上（部分瀏覽器支持）
// 格式 3：時間戳（毫秒數(shù)）
const timestamp: string = "1716121845123";
const date3: Date = new Date(Number(timestamp)); // 有效（需先轉(zhuǎn)數(shù)值）
（2）解析非標(biāo)準(zhǔn)格式字符串
對于其他格式（如MM/DD/YYYY、DD-MM-YYYY），Date構(gòu)造函數(shù)也能解析，但建議手動拆分驗(yàn)證：
// 解析MM/DD/YYYY格式
const str1: string = "06/15/2024";
const date1: Date = new Date(str1);
console.log(date1.toLocaleDateString()); // 輸出：2024/6/15
// 手動解析DD-MM-YYYY格式（更可靠）
function parseDDMMYYYY(str: string): Date | null {
const parts = str.split("-");
if (parts.length !== 3) return null; // 格式錯誤
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1; // 月份從0開始（0=1月）
const year = parseInt(parts[2], 10);
const date = new Date(year, month, day);
// 驗(yàn)證日期有效性（如2024-02-30是無效日期）
return date.getFullYear() === year &&
date.getMonth() === month &&
date.getDate() === day ? date : null;
}
console.log(parseDDMMYYYY("15-06-2024")?.toLocaleDateString()); // 輸出：2024/6/15
console.log(parseDDMMYYYY("30-02-2024")); // 輸出：null（無效日期）
（3）轉(zhuǎn)換失敗處理
解析失敗時，Date對象會成為Invalid Date，可通過getTime()判斷：
const invalidStr: string = "2024-13-01"; // 無效月份（13月） const invalidDate: Date = new Date(invalidStr); console.log(isNaN(invalidDate.getTime())); // 輸出：true（表示無效日期）
2. 日期時間轉(zhuǎn)換為字符串（Date → string）
（1）默認(rèn)格式轉(zhuǎn)換
使用Date對象的內(nèi)置方法：
const now: Date = new Date(2024, 5, 15, 14, 30, 0); // 2024-06-15 14:30:00
// 本地日期字符串
console.log(now.toLocaleDateString()); // 輸出：2024/6/15
// 本地時間字符串
console.log(now.toLocaleTimeString()); // 輸出：14:30:00
// 本地日期+時間
console.log(now.toLocaleString()); // 輸出：2024/6/15 14:30:00
// 數(shù)值示例
const price = 1234567.89;
console.log(price.toLocaleString()); // "1,234,567.89"
// 日期示例
const today = new Date();
console.log(today.toISOString()); // 2024-06-01T09:05:07.000Z
console.log(today.toISOString().slice(0, 10)); // "2024-06-01"
console.log(
new Intl.DateTimeFormat('zh-CN', {
year:'numeric', month:'2-digit', day:'2-digit',
hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false
}).format(today).replace(/\//g,'-')
); // "2024-06-01 09:05:07"
const date: Date = new Date(); // 當(dāng)前時間：假設(shè)為 2024-05-20T14:30:45.123Z
// 轉(zhuǎn)日期字符串（格式依賴瀏覽器/系統(tǒng)）
console.log(date.toString()); // "Mon May 20 2024 22:30:45 GMT+0800 (中國標(biāo)準(zhǔn)時間)"
// 轉(zhuǎn) ISO 格式（標(biāo)準(zhǔn)格式，推薦）
console.log(date.toISOString()); // "2024-05-20T14:30:45.123Z"
// 轉(zhuǎn)本地日期字符串（如 "2024/5/20"）
console.log(date.toLocaleDateString()); // "2024/5/20"
// 轉(zhuǎn)本地時間字符串（如 "14:30:45"）
console.log(date.toLocaleTimeString()); // "14:30:45"
（2）自定義格式轉(zhuǎn)換
通過提取日期時間的年、月、日等部分，拼接成指定格式：
function formatDate(date: Date): string {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); // 補(bǔ)0至2位
const day = String(date.getDate()).padStart(2, "0");
const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}`;
}
const date: Date = new Date(2024, 5, 15, 9, 5);
console.log(formatDate(date)); // 輸出：2024-06-15 09:05
// Intl.DateTimeFormat（自定義格式，推薦）
// 通過配置 `options` 參數(shù)，可以精確控制年、月、日、時、分的顯示格式
const date: Date = new Date(2024, 4, 20, 14, 30, 45); // 2024-05-20 14:30:45（月份 0-11）
// 配置選項(xiàng)
const options: Intl.DateTimeFormatOptions = {
year: "numeric", // 年（完整：2024）
month: "long", // 月（長格式：五月）
day: "numeric", // 日（20）
hour: "2-digit", // 時（兩位：14）
minute: "2-digit", // 分（兩位：30）
second: "2-digit", // 秒（兩位：45）
weekday: "long", // 星期（長格式：星期一）
timeZoneName: "short", // 時區(qū)（如 "GMT+8"）
};
// 創(chuàng)建格式化器
const formatter = new Intl.DateTimeFormat("zh-CN", options);
// 格式化結(jié)果
console.log(formatter.format(date));
// 輸出："2024年5月20日星期一 14:30:45 GMT+8"
（3）國際化格式化
使用Intl.DateTimeFormat實(shí)現(xiàn)本地化自定義格式：
const date: Date = new Date(2024, 5, 15);
const options = {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long"
};
console.log(new Intl.DateTimeFormat("zh-CN", options).format(date));
// 輸出：2024年6月15日 星期六
三、轉(zhuǎn)換場景總結(jié)
| 轉(zhuǎn)換方向 | 常用方法 / 函數(shù) | 注意事項(xiàng) |
|---|---|---|
| 字符串 → 整數(shù) | parseInt(str, 10) | 非數(shù)字字符可能導(dǎo)致解析不完整，需驗(yàn)證NaN |
| 字符串 → 浮點(diǎn)數(shù) | parseFloat(str) | 支持科學(xué)計數(shù)法，空字符串返回NaN |
| 數(shù)值 → 字符串 | num.toString() 或 toFixed(n) | toFixed(n) 保留 n 位小數(shù)（返回字符串） |
| 字符串 → 日期 | new Date(str) 或手動解析 | 優(yōu)先使用 ISO 格式，非標(biāo)準(zhǔn)格式需驗(yàn)證有效性 |
| 日期 → 字符串 | toLocaleString() 或自定義拼接 | 國際化格式用Intl.DateTimeFormat |
通過掌握這些轉(zhuǎn)換方法，初學(xué)者可以輕松處理 TypeScript 中字符串、數(shù)值和日期時間之間的數(shù)據(jù)流轉(zhuǎn)，為數(shù)據(jù)處理和展示打下堅實(shí)基礎(chǔ)。實(shí)際開發(fā)中，記得始終驗(yàn)證轉(zhuǎn)換結(jié)果的有效性，避免因無效數(shù)據(jù)導(dǎo)致的程序錯誤。
以上就是TypeScript中字符串與數(shù)值、日期時間相互轉(zhuǎn)換的實(shí)現(xiàn)方式的詳細(xì)內(nèi)容，更多關(guān)于TypeScript字符串與數(shù)值、日期時間互轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript hashtable實(shí)現(xiàn)代碼
javascript中沒有像c#,java那樣的哈希表(hashtable), 然而，javascript中的Array也只有一些類似于'哈希表'的非常簡單功能。2009-10-10
JS實(shí)現(xiàn)進(jìn)入頁面時漸變背景色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)進(jìn)入頁面時漸變背景色的方法,涉及javascript操作css控制背景色漸變的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了datagrid使用方法（重要）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解決辦法
這篇文章主要介紹了JavaScript中ParseInt("08")和“09”返回0的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript+Canvas模擬實(shí)現(xiàn)支付寶畫年兔游戲
接近過年了，支付寶的集福的活動又開始了，集美們的五福集齊了沒有。每年的集?；顒佣加幸恍┬∮螒颍衲暌膊焕?，畫年畫就是其中之一，本篇用canvas來寫一個畫年兔的游戲2023-01-01
JavaScript的String字符串對象常用操作總結(jié)
String對象用于存儲字符串?dāng)?shù)據(jù),這里我們做了JavaScript的String字符串對象常用操作總結(jié),需要的朋友可以參考下2016-05-05
JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題
這篇文章主要介紹了JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題的相關(guān)資料,需要的朋友可以參考下2015-12-12
一篇文章掌握RequireJS常用知識，通過本文，你可以對模塊化開發(fā)和AMD規(guī)范有一個較直觀的認(rèn)識，并詳細(xì)地學(xué)習(xí)RequireJS這個模塊化開發(fā)工具的常見用法，感興趣的小伙伴們可以參考一下2016-01-01
Javascript attachEvent傳遞參數(shù)的辦法
找了半天找到的解決辦法，看介紹說是javascript的閉包問題，導(dǎo)致得不能直接讀取外部的那個函數(shù)，不然就所有傳遞的參數(shù)都變?yōu)樽詈笠粋€了。2009-12-12
Javascript客戶端將指定區(qū)域?qū)С龅絎ord、Excel的代碼
Javascript 瀏覽器客戶端導(dǎo)出指定區(qū)域到Word、Excel，非常不錯的應(yīng)用實(shí)例2008-10-10