Не базовый JavaScript

Регулярные выражения

Регулярное выражение — это последовательность символов, которая определяет текстовый шаблон.

Например, шаблон t\w{2}e расшифровывается, так: "Найти все последовательности символов, которые начинаются с t, заканчиваются на e и содержат еще две буквы или цифр."

const originalString = 'Now is the time, this is the tame';
const regex = /t\w{2}e/g;
const newString = originalString.replaceAll(regex, 'place');
// newString = 'Now is the place, this is the place'

Регулярное выражение — это не строка. Это литерал, который начинается и заканчивается косой чертой (/). JavaScript распознает этот синтаксис и создает объект RegEx, который применяет это регулярное выражение.

Буква g в конце регулярного выражения — это дополнительный элемент, называемый глобальным флагом. Он показывает, что нужно искать совпадения с шаблоном во всей строке. Если не поставить флаг g, то при вызове replaceAll() получим ошибку. При вызове метода replace() можно использовать регулярное выражение без глобального флага, но тогда будет заменен только первый фрагмент, соответствующий шаблону.

Замена тегов HTML на именованные сущности

const safePieceOfHtml = originalPieceOfHtml.replaceAll('<', '&lt;').replaceAll('>', '&gt;');

Первый вызов replaceAll() возвращает новую строку, для которой выполняется следующий вызов replaceAll(), и эта третья строка присваивается переменной. Такой способ вызова метода для значения, возвращаемого другим методом, называется сцеплением методов.

Замена вхождения строки

Метод String.re­placeAll() позволяет найти все вхождения заданной подстроку и заменить их на что-то другое:

const storyText = 'I know not where I was born, save that the castle was' +
    ' infinitely old and infinitely horrible.';
const changedStory = storyText.replaceAll('infinitely', 'somewhat');
console.log(changedStory); // I know not where I was born, save that the castle was somewhat old and somewhat horrible3.

Проверка того, содержит ли строка заданную подстроку

Простая проверка типа «да — нет»
- Метод String.includes():

const searchString = 'infinitely';
const fullText = 'I know not where I was born, save that the castle was' + ' infinitely old and infinitely horrible.';
if (fullText.includes(searchString)) {
    // Подстрока найдена
}

Метод includes() не предоставляет информацию о том, где именно найдено совпадение. Для получения этой информации можно вместо includes() использовать метод String.indexOf()

Экранирующие последовательности

\' - Одинарная кавычка
\" - Двойная кавычка
\\ - Обратный слеш
\n - Новая строка
\t - Горизонтальная табуляция
\b - Возврат без удаления*
\f - Перевод страницы*
\r - Возврат каретки*
\ddd - Восьмеричное число (трехзначное — ddd)
\xdd - Шестнадцатеричное число (двузначное — dd)
\udddd - Unicode-последовательность (четырехзначное шестнадцатеричное число — dddd)

* Некоторые экранирующие последовательности, такие как возврат на один символ и перевод страницы, — это пережитки первоначального стандарта символов ASCII и языка C. Если только вы не имеете дела с устаревшими задачами, такими как получение вводимых данных с терминала, эти экранирующие последовательности едва ли будут полезны в JavaScript.

Вспомогательные методы округления чисел
• Number.toFixed() — позволяет задать число цифр после точки.

const someNumber = 1242.0055;
// Требование ровно двух цифр после точки.
// При необходимости числа будут округляться.
const fixedString = someNumber.toFixed(2);
// fixedString = '1242.01'

• Number.toExponential() — представляет числа в экспоненциальном формате, позволяет задать количество цифр после десятичной точки.

// Требование пяти значащих цифр. При необходимости
// будет использован экспоненциальный формат.
const precisionString = someNumber.toPrecision(5);
// precisionString = '1242.0'

• Number.toPrecision() — позволяет задать количество значащих цифр независимо от того, насколько велико или мало число.

// Требование представления чисел в экспоненциальном формате
// с двумя цифрами после десятичной точки.
const scientificString = someNumber.toExponential(2);
// scientificString = '1.24e+3'

Для того чтобы использовать такие элементы форматирования, как точки, знак валюты или детали, определяемые региональным стандартом, необходимо задействовать объект Intl.NumberFormat.

Для того чтобы представить число в виде денежной суммы в валюте США, нужно написать такой код:

const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
const someNumber = 1242.0005;
const moneyString = formatter.format(someNumber);
// moneyString = '$1,242.00'

Значения оператора Typeof:

• undefined;
• boolean;
• number;
• bigint;
• string;
• symbol;
• function;
• object.

Проверка строк

Требуется убедиться, что строка определена, является строкой и непустая.

if (typeof unknownVariable === 'string') {
    // unknownVariable — это строка
}

if (typeof unknownVariable === 'string' && unknownVariable.length > 0) {
    // Это именно строка, и она содержит какие-то символы либо пробелы
}

Метод String.trim() позволяет отсеять строки состоящие только из пробелов.

if (typeof unknownVariable === 'string' && unknownVariable.trim().length > 0) {
    // Это именно строка, она непустая и состоит не только из пробелов
}

Сколько типов данных поддерживает JavaScript?

Существует 8 типов данных:
• Number;
• String;
• Boolean;
• BigInt (для очень больших целых чисел);
• Symbol (для уникальных идентификаторов);
• Object (корневой тип данных для всех остальных типов данных JavaScript);
• undefined (переменная, которой не присвоено значение);
• null (отсутствующий объект).

Вставка блоков HTML с помощью сокращенных команд Emmet

Emmet — это функция редактора, которая автоматически заменяет предопределенные текстовые сокращения на стандартные блоки HTML. В некоторых редакторах кода, таких как Visual Studio и WebStorm, Emmet поддерживается изначально. В других редакторах, таких как Atom и Sublime Text, для этого нужно подключать плагины.

Например, сокращение Emmet input:time преобразуется в следующий элемент:
<input type="time" name="" id="" />

Например, для того чтобы создать маркированный список из пяти элементов, используется сокращение ul>li*5

Результат:
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

С помощью сокращенной команды html:5 можно создать стандартный скелет веб-страницы, отвечающий современному стандарту HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>