TypeScript 中字符串与数值、日期时间的相互转换

在 TypeScript 开发中，字符串、数值和日期时间是最常用的数据类型，它们之间的相互转换是基础且高频的操作。对于初学者来说，掌握这些转换方法能轻松处理数据展示、用户输入解析等场景。下面详细讲解具体实现方式。

一、字符串与数值型的相互转换

数值型包括整数（number）和浮点数（number，TypeScript 中统一用number类型表示），与字符串的转换是最常见的需求。

1. 字符串转换为数值（string → number）

（1）转换为整数

使用parseInt()方法，语法为parseInt(字符串, 基数)，基数通常为 10（表示十进制）。

typescript 复制代码

// 基本用法
const str1: string = "123";
const num1: number = parseInt(str1, 10);
console.log(num1); // 输出：123（类型为number）
// 处理带小数的字符串（只保留整数部分）
const str2: string = "456.78";
const num2: number = parseInt(str2, 10);
console.log(num2); // 输出：456
// 处理含非数字字符的字符串（解析到非数字字符为止）
const str3: string = "789abc";
const num3: number = parseInt(str3, 10);
console.log(num3); // 输出：789
// 转换失败（返回NaN）
const str4: string = "abc123";
const num4: number = parseInt(str4, 10);
console.log(num4); // 输出：NaN（Not a Number）

（2）转换为浮点数

使用parseFloat()方法，无需指定基数，直接解析字符串中的浮点数。

typescript 复制代码

// 基本用法（纯小数）
const str1: string = "3.1415";
const num1: number = parseFloat(str1);
console.log(num1); // 输出：3.1415
// 整数也会被转换为浮点数
const str2: string = "100";
const num2: number = parseFloat(str2);
console.log(num2); // 输出：100
// 处理科学计数法
const str3: string = "1e3"; // 1×10³
const num3: number = parseFloat(str3);
console.log(num3); // 输出：1000
// 转换失败（返回NaN）
const str4: string = "not a number";
const num4: number = parseFloat(str4);
console.log(num4); // 输出：NaN

（3）通用转换（自动识别类型）

使用Number()函数，可直接将字符串转换为对应的数值类型（整数或浮点数）。字符串必须完全符合数值格式，否则返回 NaN（比 parseInt/parseFloat 更严格）

javascript 复制代码

console.log(Number("123")); // 输出：123（整数）
console.log(Number("123.45")); // 输出：123.45（浮点数）
console.log(Number("")); // 输出：0（空字符串特殊处理）
console.log(Number("abc")); // 输出：NaN（转换失败）

（4）转换结果验证

转换可能失败（返回NaN），需用isNaN()函数判断：

typescript 复制代码

function safeParseNumber(str: string): number | null {
  const num = parseFloat(str);
  return isNaN(num) ? null : num; // 失败返回null，成功返回数值
}
console.log(safeParseNumber("123.45")); // 输出：123.45
console.log(safeParseNumber("invalid")); // 输出：null

2. 数值转换为字符串（number → string）

（1）基本转换

使用toString()方法或模板字符串：

typescript 复制代码

const num1: number = 123;
console.log(num1.toString()); // 输出："123"（字符串类型）
const num2: number = 3.14;
console.log(`${num2}`); // 输出："3.14"（模板字符串转换）

（2）指定小数位数

结合toFixed()方法，转换时保留指定小数位数（返回字符串）：

typescript 复制代码

const num: number = 5.678;
console.log(num.toFixed(2)); // 输出："5.68"（保留2位小数，四舍五入）
console.log(num.toFixed(0)); // 输出："6"（保留0位小数）

二、字符串与日期时间的相互转换

日期时间在 TypeScript 中用Date对象表示，与字符串的转换需注意格式兼容性。

1. 字符串转换为日期时间（string → Date）

Date构造函数可直接解析特定格式的字符串，推荐使用ISO 8601 标准格式（如YYYY-MM-DD、YYYY-MM-DDTHH:mm:ss）。

（1）解析 ISO 格式字符串

typescript 复制代码

// 仅日期（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 标准格式（推荐，兼容性最好）
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：时间戳（毫秒数）
const timestamp: string = "1716121845123";
const date3: Date = new Date(Number(timestamp)); // 有效（需先转数值）

（2）解析非标准格式字符串

对于其他格式（如MM/DD/YYYY、DD-MM-YYYY），Date构造函数也能解析，但建议手动拆分验证：

typescript 复制代码

// 解析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);
  // 验证日期有效性（如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）转换失败处理

解析失败时，Date对象会成为Invalid Date，可通过getTime()判断：

typescript 复制代码

const invalidStr: string = "2024-13-01"; // 无效月份（13月）
const invalidDate: Date = new Date(invalidStr);
console.log(isNaN(invalidDate.getTime())); // 输出：true（表示无效日期）

2. 日期时间转换为字符串（Date → string）

（1）默认格式转换

使用Date对象的内置方法：

less 复制代码

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

// 数值示例
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(); // 当前时间：假设为 2024-05-20T14:30:45.123Z

// 转日期字符串（格式依赖浏览器/系统）
console.log(date.toString()); // "Mon May 20 2024 22:30:45 GMT+0800 (中国标准时间)"

// 转 ISO 格式（标准格式，推荐）
console.log(date.toISOString()); // "2024-05-20T14:30:45.123Z"

// 转本地日期字符串（如 "2024/5/20"）
console.log(date.toLocaleDateString()); // "2024/5/20"

// 转本地时间字符串（如 "14:30:45"）
console.log(date.toLocaleTimeString()); // "14:30:45"

（2）自定义格式转换

通过提取日期时间的年、月、日等部分，拼接成指定格式：

javascript 复制代码

function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 补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` 参数，可以精确控制年、月、日、时、分的显示格式
const date: Date = new Date(2024, 4, 20, 14, 30, 45); // 2024-05-20 14:30:45（月份 0-11）

// 配置选项
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", // 时区（如 "GMT+8"）
};

// 创建格式化器
const formatter = new Intl.DateTimeFormat("zh-CN", options);

// 格式化结果
console.log(formatter.format(date)); 
// 输出："2024年5月20日星期一 14:30:45 GMT+8"

（3）国际化格式化

使用Intl.DateTimeFormat实现本地化自定义格式：

sql 复制代码

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日 星期六

三、转换场景总结

转换方向	常用方法 / 函数	注意事项
字符串 → 整数	parseInt(str, 10)	非数字字符可能导致解析不完整，需验证NaN
字符串 → 浮点数	parseFloat(str)	支持科学计数法，空字符串返回NaN
数值 → 字符串	num.toString() 或 toFixed(n)	toFixed(n) 保留 n 位小数（返回字符串）
字符串 → 日期	new Date(str) 或手动解析	优先使用 ISO 格式，非标准格式需验证有效性
日期 → 字符串	toLocaleString() 或自定义拼接	国际化格式用Intl.DateTimeFormat

通过掌握这些转换方法，初学者可以轻松处理 TypeScript 中字符串、数值和日期时间之间的数据流转，为数据处理和展示打下坚实基础。实际开发中，记得始终验证转换结果的有效性，避免因无效数据导致的程序错误。