Date.toLocaleTimeString() — час у форматі локалі

Загальний опис

Метод Date.prototype.toLocaleTimeString() конвертує часову частину дати в рядок, представлення якого відповідає локальному часовому поясу. Цей метод призначений для того, щоб зробити представлення часу більш дружнім і зрозумілим для користувачів, не зважаючи на їхні місцеві налаштування і формати часу. Він особливо корисний у ситуаціях, коли потрібно вивести час на веб-сторінці так, щоб він був зрозумілим для користувачів з різних культур та регіонів.

Якщо вам потрібно показати час на сайті для користувачів у різних країнах, ви можете використовувати цей метод для автоматичного адаптування часового формату відповідно до налаштувань користувача. Приклад:

let date = new Date();
let timeString = date.toLocaleTimeString('en-US');
console.log(timeString); // "12:00:00 AM" for en-US locale

У цьому прикладі, toLocaleTimeString() виводить час у форматі, прийнятому в Сполучених Штатах Америки.

Та необмежуйтеся лише веб-розробкою. Date.prototype.toLocaleTimeString() може бути використаний у будь-яких застосунках JavaScript, де потрібно форматувати час, наприклад, в Node.js або інших серверних або клієнтських сценаріях.

Особливість цього методу полягає в тому, що він дозволяє автоматизувати процес локалізації часу, звільняючи розробників від необхідності писати додатковий код для кожної локалі. Він також пропонує гнучкість, оскільки дозволяє передавати конкретні параметри локалі та опції форматування. Приклад:

let date = new Date();
let options = { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short' };
let timeString = date.toLocaleTimeString('en-GB', options);
console.log(timeString); // "00:00:00 GMT" for en-GB locale

У цьому прикладі метод використовується з додатковими опціями, які дозволяють відобразити час з секундами та абревіатурою часового поясу для Великобританії.

правити

Порада

Початківцям слід пам'ятати про важливість перевірки підтримки браузерів, оскільки не всі можуть підтримувати Date.prototype.toLocaleTimeString() або його параметри.

автор: Bond правити

Нотатка

Для більш досвідчених розробників, використання Date.prototype.toLocaleTimeString() може бути корисним для логування з подіями, коли потрібно вивести час події у локальному форматі, зручному для аналізу і читання, особливо, коли робиться спроба відлагодження коду в різних локальних умовах.

автор: Bond правити

Нотатка

Варто пам’ятати, що Date.prototype.toLocaleTimeString() може приймати додаткові параметри для точного визначення формату часу. Наприклад, можна встановити 24-годинний формат часу або вибрати конкретний стиль відображення.

let timeString = new Date().toLocaleTimeString('en-GB', {hour12: false, timeStyle: 'short'});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

toLocaleTimeString()
toLocaleTimeString(locales)
toLocaleTimeString(locales, options)

Параметри

locales

Рядок з мовним тегом BCP 47 або масив таких рядків. Відповідає параметру locales конструктора Intl.DateTimeFormat().

Значення:

• Рядок (наприклад, "en-US", "uk-UA").
• Масив рядків (наприклад, ["en-US", "fr-FR"]).

У реалізаціях без підтримки Intl.DateTimeFormat, цей параметр ігнорується, і зазвичай використовується локаль хоста.

автор: Bond

правити

options

Об'єкт з налаштуваннями формату виводу. Може містити ряд незобов'язкових властивостей, таких як:

• dayPeriod: Формат відображення частини доби (наприклад, AM/PM).
• hour: Формат відображення годин.
• minute: Формат відображення хвилин.
• second: Формат відображення секунд.
• fractionalSecondDigits: Кількість знаків після коми для дробової частини секунди.

Якщо dayPeriod, hour, minute, second та fractionalSecondDigits всі не визначені, то hour, minute, second встановлюються як "numeric".

У реалізаціях без підтримки Intl.DateTimeFormat, цей параметр ігнорується.

автор: Bond

правити

Повернення

string

Повертає рядок, який представляє частину часу даного екземпляру Date відповідно до конвенцій конкретної мови.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	5	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

// Створюємо новий об’єкт дати
let currentDate = new Date(); 

// Виводимо час у форматі за замовчуванням
console.log('Час за замовчуванням:', currentDate.toLocaleTimeString());

// Виводимо час у британській локації у 24-годинному форматі
console.log('Британський час:', currentDate.toLocaleTimeString('en-GB', { hour12: false }));

// Виводимо час у американській локації у 12-годинному форматі
console.log('Американський час:', currentDate.toLocaleTimeString('en-US', { hour12: true }));

<header>
  <h2 class="title">Date.prototype.toLocaleTimeString()</h2>
  <p class="description">Цей метод конвертує час з об’єкта Date у рядок, враховуючи локалізацію.</p>
</header>
<main>
  <div class="result">
    <label for="locale">Виберіть локацію: </label>
    <select id="locale">
      <option value="en-US">English (US)</option>
      <option value="uk-UA">Українська</option>
    </select>
    <p>Поточний час: <span id="time"></span></p>
    <button onclick="showTime()">Показати час</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function showTime() {
  // Знаходження обраної локації
  const locale = document.getElementById('locale').value;
  // Створення нового об’єкта дати
  const date = new Date();
  // Виведення часу в обраній локації
  document.getElementById('time').textContent = date.toLocaleTimeString(locale);
}
//# sourceURL=pen.js

// Створюємо новий об’єкт дати
let currentDate = new Date(); 

// Виводимо короткий формат часу
console.log('Короткий формат:', currentDate.toLocaleTimeString('uk-UA', { timeStyle: 'short' }));

// Виводимо повний формат часу
console.log('Повний формат:', currentDate.toLocaleTimeString('uk-UA', { timeStyle: 'full' }));