在JS中将xx:xx转换为xxhxx

Question

我收到了 Json 格式的时间数据：“7:00”、“7:30”、“8:00”、“8:30”、“9:00”、“9:30”、“10： 00”，“10:30”，“11:00”，“11:30”，……]...直到“18:00”基本上一天我有这种格式的 30 分钟时段。

我在网页中显示它们，我想以 7h30 / 8h / 8h30/ 9h 等格式显示它们。

基本上，我正在尝试删除'：'，将它们替换为 h 并在有任何时删除 00。

我想最好的做法是转换我的数据，以便 JS 将其识别为时间并知道它的小时数？

我试过这个

slots.replace(':', 'h').replace('00', ' ');

没关系，但目的是将数据识别为时间。 所以我想我必须创建一个函数来以分钟或秒为单位划分时间并将其传递给 js 时间？ 我告诉自己，如果网站是在英文或其他语言的浏览器上，那么如果相应地转换时间会很棒。 目前，用典型的 7:00 - 8:00 ... 14h 15h 替换作品，这在法语、意大利语等中是可以的，但如果我在早上 7 点/下午 4 点通过，那就不会太好了...

你怎么看？

Answer 1

为什么不直接使用String.replace() ？

slots = slots.replace(':', 'h').replace('00', '')

Answer 2

您提到您正在以 JSON 格式获取“时间数据”，因此我假设您已将该 JSON 转换为时间数组。 在下面的代码中，我创建了数组，但如果您已经有了时间数组，显然可以跳过。

也就是说，这是一种方法，解释性注释在代码中：

 // defining a named function to generate the times, with given increments; // the function is written with Arrow syntax, and passes in an Opts argument // which defaults to an empty Object-literal if no argument(s) are passed by // the user: const timeSteps = (opts = {}) => { // default settings: let settings = { // start: Integer, the hour of the day (24hr format) that // the time-steps should start: start: 7, // end: Integer, the hour of the day (24hr format) that // the time-steps should finish: end: 18, // increments: Integer, the number of minutes between increments (there // are no sanity checks, so ideally 60 should be divisible // by this number: increments: 30 }; // updating the settings Object, using Object.keys() to retrieve an Array // of the keys of the opts Object, iterating over that Array with // Array.prototype.forEach(): Object.keys(opts).forEach( // passing the current key, of the array of keys, into the function, // in which we update the settings[key] property to be equal to the // value of the opts[key] property-value: (key) => settings[key] = opts[key] ); // using destructuring assignment to instantiate the named variables // to be the property-value of those properties from the settings // Object: let { start, end, increments } = settings, // defining the duration (in hours): duration = end - start, // number of minutes in one hour: hours = 60, // creating an Array, using Array.from() and an Object literal // with its length defined as hours / increments (to get the // number of steps per hour): hourSteps = Array.from({ length: hours / increments // iterating over the created Array, using Array.prototype.map() // to return a new Array based on the old: }).map( // here we don't use the (undefined) array-value, but we do // use the index (i) of the current array-value from the // created Array; we return the value of the current index // multiplied by the number of hours multiplied by the // fraction created by 1 divided by the number of increments // per hour (so for thirty minute increments: // i * (60 * (1/(60/30)) // i * (60 * (1/2) // i * (60 * 0.5) // i * 30 (this works, but I think it's horribly written and // should be simplified): (_, i) => i * (hours * (1 / (hours / increments))) ); // here we create another Array using the same approach, this time based // on the duration (calculated earlier): return Array.from({ length: duration // iterating over that Array with Array.prototype.map(): }).map( // passing in the index of the array-element: (_, i) => { // returning the result of the following call to Array.prototype.map() // on the hourSteps Array: return hourSteps.map( // here we use a template literal to: // increase the value of start by the value of the index to increase the // time over the course of the array processing, calling toString() on // the resulting number, and then padding the start of that string to // 2 places, padded with the 0 character. // we then have a literal ':' character, // then we convert the hStep to a String, with Number.prototype.toString() // chaining it with String.prototype.padEnd(), to convert a single-digit // number to a String of length = 2, padded with 0 characters: (hStep) => `${(start + i).toString().padStart(2,'0')}:${hStep.toString().padEnd(2,0)}` ) // flattening the 2 dimensional Array to a single dimension: }).flat(); }, // getting the times: incrementedHours = timeSteps(), // creating an <li> element: li = document.createElement('li'), // creating a document fragment, to minimise the number paints // the browser has to execute: fragment = document.createDocumentFragment(), // getting a reference to the element to which the times will be added: list = document.querySelector('ol'); // using Array.prototype.forEach() to iterate over the incrementedHours Array: incrementedHours.forEach( // passing in the time from the Array of times: (time) => { // cloning the created <li> element: let clone = li.cloneNode(); // setting the text-content of the clone to // be equal to the time; then using String.prototype.replace() // to replace either ":" or "00", globally (so replacing both), // using an anonymous Arrow function, with a conditional (ternary) // operator to see if the matched sequence is equal to ':', if it // is we replace that ':' character with 'h' or, otherwise, with // an empty-string: clone.textContent = time.replace(/\:|00/g, (match) => match === ':' ? 'h' : ''); // appending the clone to the document-fragment: fragment.append(clone); }); // appending the fragment to the <ol> list.append(fragment);

 *, ::before, ::after { box-sizing: border-box; font: normal 400 1rem / 1.5 sans-serif; margin: 0; padding: 0; } ul, ol, li { list-style-type: none; } ol { display: flex; flex-wrap: wrap; gap: 0.4em; width: clamp(10em, 70vw, 700px); margin-block: 1em; margin-inline: auto; } li { border: 1px solid #000; padding: 0.2em; border-radius: 0.3em; }

 <ol></ol>

JS 小提琴演示。

参考：

• Array.protoype.forEach() 。
• Array.prototype.from() 。
• Array.prototype.map() 。
• 箭头函数。
• document.createDocumentFragment() 。
• document.createElement() 。
• document.querySelector() 。
• Element.append() 。
• Number.prototype.toString() 。
• Object.keys() 。
• String.prototype.padEnd() 。
• String.prototype.padStart() 。
• String.prototype.replace() 。
• 模板文字。