在JS中将xx:xx转换成xxhxx
Convert xx:xx into xxhxx in JS
我收到 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 点通过，那就不太好了。 .
你怎么看？
感谢您的帮助和花时间回复我。
为什么不直接使用 String.replace()？
slots = slots.replace(':', 'h').replace('00', '')
你提到你正在获取 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>
参考文献：
Array.protoype.forEach().Array.prototype.from().Array.prototype.map().- Arrow functions.
document.createDocumentFragment().document.createElement().document.querySelector().Element.append().Number.prototype.toString().Object.keys().String.prototype.padEnd().String.prototype.padStart().String.prototype.replace().- Template literals.
我收到 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 点通过，那就不太好了。 .
你怎么看？
感谢您的帮助和花时间回复我。
为什么不直接使用 String.replace()？
slots = slots.replace(':', 'h').replace('00', '')
你提到你正在获取 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>
参考文献：
Array.protoype.forEach().Array.prototype.from().Array.prototype.map().- Arrow functions.
document.createDocumentFragment().document.createElement().document.querySelector().Element.append().Number.prototype.toString().Object.keys().String.prototype.padEnd().String.prototype.padStart().String.prototype.replace().- Template literals.