本文详细介绍了如何在javascript中从`hh:mm`格式的时间字符串中高效地提取小时和分钟。针对html ``元素返回的此类字符串，我们将演示如何利用字符串的`split()`方法结合数组解构赋值，快速准确地获取所需的时间组件，并提供实用的代码示例和注意事项。

在前端开发中，我们经常会遇到处理时间输入的需求。HTML5提供了元素，它允许用户方便地选择时间。当用户通过这个输入框选择时间后，其value属性会返回一个标准的hh:mm格式字符串，例如"14:30"。然而，直接对这个字符串调用JavaScript Date对象的getHours()或getMinutes()方法是无效的，因为这些方法是Date对象实例特有的，不能直接应用于字符串。

理解hh:mm格式与JavaScript Date对象

hh:mm格式是一个纯粹的字符串表示，它不具备JavaScript Date对象所包含的日期、时区等复杂信息。因此，尝试通过new Date("hh:mm").getHours()等方式来解析会得到不正确的结果，或者NaN，因为JavaScript的Date构造函数无法直接从hh:mm这样的局部时间字符串中可靠地创建有效的Date对象。

要从hh:mm字符串中获取小时和分钟，我们需要使用字符串处理方法。

使用split()方法提取小时和分钟

最直接且高效的方法是利用JavaScript字符串的split()方法。split()方法可以根据指定的分隔符将字符串分割成一个字符串数组。对于hh:mm格式，我们可以使用冒号:作为分隔符。

基本原理：

调用timeString.split(":")，它会返回一个包含两个元素的数组：第一个元素是小时字符串，第二个元素是分钟字符串。
利用ES6的数组解构赋值（Destructuring Assignment）语法，可以简洁地将这两个字符串直接赋给独立的变量。

实战示例

以下是一个完整的示例，演示如何从获取值并解析出小时和分钟：

解析时间输入

时间解析示例

选择时间:

小时: --

分钟: --

代码解析

HTML部分:
- ：定义了一个时间输入框。onchange事件会在用户选择时间并失去焦点时触发，并将当前输入框的值（this.value，即hh:mm格式字符串）作为参数传递给displayTimeComponents函数。
JavaScript部分:
- function displayTimeComponents(timeValue)：这是处理时间值的核心函数。
- if (!timeValue)：一个简单的非空检查，确保有值才进行处理。
- const [hoursStr, minsStr] = timeValue.split(":");：这是关键的一行。
  - timeValue.split(":")：将"14:30"这样的字符串分割成["14", "30"]这样一个数组。
  - const [hoursStr, minsStr] = ...：这是ES6的数组解构赋值语法。它将split()返回数组的第一个元素赋给hoursStr变量，第二个元素赋给minsStr变量。此时，hoursStr和minsStr都是字符串类型。
- const hours = parseInt(hoursStr, 10); 和 const minutes = parseInt(minsStr, 10);：由于split()返回的是字符串，如果需要进行数学运算（例如计算总分钟数、比较时间等），则需要使用parseInt()将其转换为整数。10是指定基数，确保按十进制解析。
- console.log()和document.getElementById().textContent = ...：用于在控制台输出结果并在页面上更新显示。

注意事项

数据类型: split()方法返回的元素是字符串。如果需要对小时或分钟进行数学运算，务必使用parseInt()或Number()将其转换为数字类型。
输入验证: 尽管通常会确保输入格式正确，但在处理来自其他来源的字符串时，最好添加额外的验证逻辑，以防split()后数组的长度不符合预期（例如，timeValue可能不是hh:mm格式）。
时区: hh:mm格式本身不包含时区信息。如果应用程序需要处理跨时区的时间，则需要更复杂的Date对象或第三方库（如Moment.js、date-fns）来管理。
错误处理: 在实际应用中，可以添加try-catch块或更详细的条件判断来处理timeValue为空、格式不正确等边缘情况。