<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как установить минимальную длину строки в JavaScript?

Как установить минимальную длину строки в 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, но для последнего существуют полифилы.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.