如何将 JSON 时间转换为可读的人类格式？答案

【问题标题】：How to convert JSON time into readable human format?如何将 JSON 时间转换为可读的人类格式？
【发布时间】：2020-04-12 11:50:25
【问题描述】：

我正在使用 ajax 从 api 调用中获取数据。它工作正常。我只是想知道如何格式化distance_time，使其更具可读性和用户友好性？我查看了文档，似乎找不到可以快速转换的内容。有什么建议吗？

$.ajax({
url: 'https://exampleapi.com/key=my_key',
dataType: 'json',
type: 'GET',
contentType:'json',
success: function(data)
{
//console.log( data)

//get distance in miles
var distance_miles = data['route']['distance'];
//$('.distance_miles').html(distance_miles);

//get formatted time
var distance_time = data['route']['formattedTime'];
$('.distance_time').html(distance_time);

}
});

以上代码输出：

"00:14:33";

这对程序员来说很好，但对用户来说并不违反直觉。

我想显示：

14 mins and 33 secs

如果有几个小时，它应该显示如下内容：

2 hours 14 mins and 45 secs

【问题讨论】：

好吧，如果必须，您可以将"00:14:44" 拆分为小时、分钟和秒，然后从那里开始...const [hours,minutes,seconds] = data['route']['formattedTime'].split(":");
到目前为止你尝试过什么？你被困在哪里了？
@kevinSpaceyIsKeyserSöze：我会更新我的答案
JSON 没有时间格式，也不是 JavaScript 日期格式。它只是一个字符串，包含小时、分钟和秒（在我看来，这对程序员来说也不是“合适的”，因为它需要被解析才能有用）。看来你只需要一些字符串操作。
为什么不让 API 返回最终格式化的时间字符串，而不是在 JS 中操作呢？大概后端服务将使用某种形式的日期/时间对象，您可以将其输出为人类可读的字符串，而不必在前端捏造一些东西。

标签： javascript jquery time-format

【解决方案1】：

这并不完美，我很确定你可以用 for 语句减少代码量，但这是主要思想，当然你需要用你的数据替换字符串。

let distance_time = formatTimeString('02:10:01')
  console.log(distance_time)
  document.getElementById('time').innerHTML = distance_time

  function formatTimeString(time) {
    let arr = time.split(':')
    let distance_time = ''

    let hours = parseInt(arr[0])
    let minutes = parseInt(arr[1])
    let seconds = parseInt(arr[2])

    if (hours > 0 ) {
      distance_time += hours + ' hour'
      hours > 1 ? distance_time += 's ' : ' '
    }

    if (minutes > 0) {
      distance_time += minutes + ' minute'
      minutes > 1 ? distance_time += 's ' : ' '
    }

    if (seconds > 0) {
      distance_time += ' and ' + seconds + ' second'
      seconds > 1 ? distance_time += 's ' : ' '
    }

    return distance_time
  }

<html>
<head>
  <title>test</title>
</head>
<body>
The time you made is: <span id="time"></span>
</body>
</html>

我希望这可以帮助您找到更好的方法！

【讨论】：

【解决方案2】：

我不知道我第一次在文档中是怎么错过的。一种快速而简单的方法是使用.replace() 或replaceWith()。更多详情here

这对我有用：

//get formatted time
var distance_time = data['route']['formattedTime'];
var distance_in_time = distance_time.replace(':',' hrs, ').replace(':',' Min and ') + ' secs.';
$('.distance_time').html(distance_in_time);

【讨论】：

仅供参考，如果您愿意，您可以接受自己的答案，这样您的问题就不会出现在未回答部分中以减少噪音。

【解决方案3】：

这将正确格式化您的字符串，并仅显示相关的时间后缀。还有一个参数用于将 0 填充到您的数字 - 您的问题没有说明您希望这种行为如何，所以我将其作为选择（默认为 true）

function formatTimeString(timeString, padZeros = true) {
  let arr = timeString.split(':').map(x => parseInt(x));
  let str = ['hour', 'min', 'sec'];

  return arr.reduce((acc, num, i) => {
    if (num <= 0) {
      return acc;
    } else {
      let digit = (padZeros && num < 10) ? '0' + num : num; 
      let suffix = num > 1 ? str[i] + 's' : str[i];
    
      return acc + `${digit} ${suffix} `;
    }
  }, '').replace(/(mins|min)/g, '$1 and').trim();
}

// Minutes and Seconds
console.log(formatTimeString("00:04:33", false));
console.log(formatTimeString("00:04:33", true));

// with Hours
console.log(formatTimeString("02:14:45", false));
console.log(formatTimeString("02:14:45", true));

// Just seconds
console.log(formatTimeString("00:00:50", false));
console.log(formatTimeString("00:00:50", true));

【讨论】：