本文详细介绍了如何在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格式，我们可以使用冒号:作为分隔符。
立即学习“Java免费学习笔记（深入）”；
基本原理：
调用timeString.split(“:”)，它会返回一个包含两个元素的数组：第一个元素是小时字符串，第二个元素是分钟字符串。利用ES6的数组解构赋值（Destructuring Assignment）语法，可以简洁地将这两个字符串直接赋给独立的变量。
实战示例
以下是一个完整的示例，演示如何从获取值并解析出小时和分钟：
解析时间输入 body { font-family: sans-serif; margin: 20px; } input[type="time"] { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } div { margin-top: 20px; font-size: 18px; }时间解析示例
/** * 从hh:mm格式的字符串中解析出小时和分钟，并显示。 * @param {string} timeValue - hh:mm格式的时间字符串。 */ function displayTimeComponents(timeValue) { if (!timeValue) { document.getElementById('hoursOutput').textContent = '--'; document.getElementById('minutesOutput').textContent = '--'; console.log("未选择时间。"); return; } // 使用split方法和数组解构赋值 const [hoursStr, minsStr] = timeValue.split(":"); // 通常，我们可能需要将字符串转换为数字进行后续计算 const hours = parseInt(hoursStr, 10); const minutes = parseInt(minsStr, 10); console.log("原始时间字符串:", timeValue); console.log("解析出的小时 (字符串):", hoursStr); console.log("解析出的分钟 (字符串):", minsStr); console.log("解析出的小时 (数字):", hours); console.log("解析出的分钟 (数字):", minutes); // 更新页面显示 document.getElementById('hoursOutput').textContent = hours; document.getElementById('minutesOutput').textContent = minutes; } // 页面加载时初始化，如果input有默认值 document.addEventListener('DOMContentLoaded', () => { const timeInput = document.getElementById('timepicker'); if (timeInput.value) { displayTimeComponents(timeInput.value); } });小时: --
分钟: --
代码解析
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为空、格式不正确等边缘情况。
总结
通过利用JavaScript的split()方法结合ES6的数组解构赋值，我们可以非常简洁高效地从hh:mm格式的时间字符串中提取出小时和分钟。这种方法不仅适用于元素的值，也适用于任何符合hh:mm模式的字符串。理解数据类型转换和适当的输入验证是确保代码健壮性的关键。
以上就是JavaScript中解析hh:mm时间字符串以获取小时和分钟的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597257.html
微信扫一扫 
支付宝扫一扫 
