Как установить минимальную длину строки в JavaScript?
Одна из тех вещей, которые отнимают больше всего времени и сил при попытке их реализации с помощью чистого JavaScript это установка минимальной длины строки. Эта процедура, ранее требовавшая неимоверного терпение для того, чтобы не запутаться в многочисленных конкатенациях строк, сейчас стала до безобразия простой.
Пример
Допустим для целей учета дней рождения сотрудников компании, нам необходимо получить текущую дату и отобразить ее в следующем формате MM/DD/YYYY. Пример кода смотрите ниже (для демонстрационных целей я выбрал произвольную дату):
<div id="app"></div>
var app = document.querySelector('#app');
// Получение текущей даты
var date = new Date('July 4, 2018');
// Форматирование даты
var datestamp = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
// отображение на странице
app.textContent = datestamp;
See the Pen jvZqVG by Chris Ferdinandi (@cferdinandi) on CodePen.
Здесь внимательный читатель может заметить, что формат вывода данного кода следующий – M/D/YYYY. И, если вы уже работали с датой и временем в JavaScript, то вы знаете, что часто необходимо числа, состоящие из одной цифры, дополнять нулями. Для этого можно использовать условные выражения, например.
Но как еще можно сделать, чтобы числа месяца, по крайней мере, состояли бы из двух цифр, т.е. если число меньше десяти, необходимо добавить ноль перед этим числом? Здесь нам на помощь приходят методы ES6 под названием padStart() и padEnd().
Методы String.padStart() и String.padEnd()
Метод padStart() дополняет начало строки неким шаблоном-строкой, до тех пор, пока эта строка не будет иметь минимально требуемую длину. Метод padEnd() делает то же самое, но не для начало строки, а для конца.
Оба метода принимают два аргумента: длину строки и строку-шаблон, которая будет дополнять результирующую строку.
Смотря на наш предыдущий пример, можно сделать вывод, что для решения задачи нам необходимо использовать метод padStart() для добавления к числу лидирующих нулей. Для таких месяцев как октябрь, ноябрь, декабрь ничего не должно меняться, потому, что они уже представлены двумя числами. Тоже верно и для любой даты начинающейся с 10.
При работе с датами обратите внимание на следующий факт: они являются числами, поэтому нам в первую очередь необходимо использовать метод toString() для преобразования их в строки.
var app = document.querySelector('#app');
// получение даты
var date = new Date('July 4, 2018');
// Форматирование даты
var datestamp = (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0') + '/' + date.getFullYear();
See the Pen YOeqrX by Chris Ferdinandi (@cferdinandi) on CodePen.
Таким образом, методы класса String padStart() и padEnd() можно использовать, чтобы упростить форматирование строк. Они работают во всех современных браузерах, за исключением Internet Explorer’a, но для последнего существуют полифилы.
-
Создано 06.11.2018 10:11:36
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.