​🧾 Методы строк в JavaScript (часть 3)

Метод lastIndexOf() возвращает индекс последнего вхождения указанного текста в строке.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.lastIndexOf("размещение");

Оба indexOf(), и lastIndexOf() возвращают -1, если текст не найден.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.lastIndexOf("размещение");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 4)

Оба метода принимают второй параметр в качестве начальной позиции для поиска.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.indexOf("размещение", 15);

Эти lastIndexOf() методы выполняют поиск в обратном направлении (от конца к началу), что означает: если второй параметр равен 15, поиск начинается с позиции 15 и выполняется поиск до начала строки.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.lastIndexOf("размещение", 15);

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 5)

Поиск строки в строке
В search() методе ищет строку для указанного значения и возвращает позицию матча.

Пример:

var str = "Пожалуйста, найдите, где происходит 'размещение'!";
var pos = str.search("размещение");

Два метода, indexOf() и search(), равны?

Они принимают одни и те же аргументы (параметры) и возвращают одно и то же значение?

Эти два метода НЕ равны. Вот отличия:

• Метод search() не может принимать второй аргумент позиции начала.

• Метод indexOf() не может принимать мощные значения поиска (регулярные выражения).

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 6)

Извлечение строчных частей.

Есть 3 метода извлечения части строки:

1. slice(start, end)
2. substring(start, end)
3. substr(start, length)

1. Метод slice()
Метод slice() извлекает часть строки и возвращает извлеченную часть в новой строке.

Метод принимает 2 параметра: начальную позицию и конечную позицию (конец не включен).

В этом примере часть строки вырезается из позиции 7 в позицию 12 (13-1).

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.slice(7, 13);

Результатом res будет:

Банан

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 7)

Помните: JavaScript считает позиции с нуля. Первая позиция - 0.

Если параметр отрицательный, позиция отсчитывается от конца строки

В этом примере часть строки вырезается из позиции -12 в позицию -6.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.slice(-12, -6);

Результатом res будет:

Банан

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 8)

Если вы опустите второй параметр, метод вырежет остальную часть строки

Пример:

var res = str.slice(7);

или, считая с конца.

Пример:

var res = str.slice(-12);

Отрицательные позиции не работают в Internet Explorer 8 и ранее.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 9)

Метод substring():

Метод substring() похож на slice().

Разница в том, что substring() не может принимать отрицательные индексы.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substring(7, 13);

Результатом res будет:

Банан

Если вы опустите второй параметр, substring() оставшаяся часть строки будет вырезана.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 10)

Метод substr():

Метод substr() похоже на slice().

Разница в том, что второй параметр указывает длину извлеченной части.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substr(7, 6);

Результатом res будет:

Банан

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 11)

Если вы опустите второй параметр, substr() оставшаяся часть строки будет вырезана.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substr(7);

Результатом res будет:

Банан, Киви

Если первый параметр отрицательный, позиция отсчитывается от конца строки.

Пример:

var str = "Яблоко, Банан, Киви";
var res = str.substr(-4);

Результатом res будет:

Киви

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 12)

Замена содержимого строки
Метод replace() заменяет указанное значение с другим значением в строке.

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace("Microsoft", "Schoolsw3");

Метод replace() не изменяет строку она вызвана. Он возвращает новую строку.

По умолчанию replace() метод заменяет только первое совпадение:

Пример:

str = "Пожалуйста, посетите Microsoft и Microsoft!";
var n = str.replace("Microsoft", "Schoolsw3");

По умолчанию replace() метод чувствителен к регистру. Записать MICROSOFT (в верхнем регистре) не получится.

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace("MICROSOFT", "Schoolsw3");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 13)

Чтобы заменить нечувствительность к регистру, используйте регулярное выражение с /i флагом (нечувствительность):

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace(/MICROSOFT/i, "Schoolsw3");

Обратите внимание, что регулярные выражения пишутся без кавычек.

Чтобы заменить все совпадения, используйте регулярное выражение с /g флагом (глобальное совпадение):

Пример:

str = "Пожалуйста, посетите Microsoft и Microsoft!";
var n = str.replace(/Microsoft/g, "Schoolsw3");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 13)

Чтобы заменить нечувствительность к регистру, используйте регулярное выражение с /i флагом (нечувствительность):

Пример:

str = "Пожалуйста, посетите Microsoft!";
var n = str.replace(/MICROSOFT/i, "Schoolsw3");

Обратите внимание, что регулярные выражения пишутся без кавычек.

Чтобы заменить все совпадения, используйте регулярное выражение с /g флагом (глобальное совпадение):

Пример:

str = "Пожалуйста, посетите Microsoft и Microsoft!";
var n = str.replace(/Microsoft/g, "Schoolsw3");

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 14)

Преобразование в верхний и нижний регистр
Строка преобразуется в верхний регистр с помощью toUpperCase().

Пример:

var text1 = "Привет, мир!"; // Строка
var text2 = text1.toUpperCase(); // text2 к text1, преобразованный в верхний

Строка преобразуется в нижний регистр с помощью toLowerCase().

Пример:

var text1 = "Привет, мир!"; // Строка
var text2 = text1.toLowerCase(); // text2 к text1, преобразованный в нижний

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 15)

Метод concat():

Метод concat() объединяет две или более строк.

Пример:

var text1 = "Привет";
var text2 = "Мир";
var text3 = text1.concat(" ", text2);

Этот concat() метод можно использовать вместо оператора плюс. Эти две строки делают то же самое.

Пример:

var text = "Привет" + " " + "Мир!";
var text = "Привет".concat(" ", "Мир!");

Все строковые методы возвращают новую строку. Они не изменяют исходную строку.
Формально сказано: строки неизменяемы: строки нельзя изменить, их можно только заменить.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Методы строк в JavaScript (часть 16)

Метод trim():

Метод trim() удаляет пробельные символы с обеих сторон строки:

Пример:

var str = " Привет, мир! ";
alert(str.trim());

Этот trim() метод не поддерживается в Internet Explorer 8 и ниже.

Если вам нужна поддержка IE 8, вы можете использовать replace() вместо этого регулярное выражение:

Пример:

var str = " Привет, мир! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

Вы также можете использовать решение замены выше, чтобы добавить функцию обрезки в JavaScript String.prototype:

Пример:

if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
var str = " Привет, мир! ";
alert(str.trim());

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Как найти подстроку в строке в JavaScript?

Метод charAt возвращает символ по указанному индексу.

Метод includes проверяет, содержит ли строка переданную подстроку. Возвращается true либо false. Вторым параметром возможно передать индекс в строке, с которого надо начать поиск, но это необязательно.

Метод search проверяет, присутствует ли в строке переданное значение либо регулярное выражение и возвращает индекс начала совпадения. В случае, если переданное значение не найдено, возвращается -1.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Замыкание в JavaScript (Часть 1)

JavaScript – язык с сильным функционально-ориентированным уклоном. Он даёт нам много свободы. Функция может быть динамически создана, скопирована в другую переменную или передана как аргумент другой функции и позже вызвана из совершенно другого места.

Мы знаем, что функция может получить доступ к переменным из внешнего окружения, эта возможность используется очень часто. Что произойдет, когда переменные изменятся? Ответим на эти и другие вопросы.

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

1. Функция sayHi использует внешнюю переменную name. Какое значение будет использовать функция при выполнении?

let name = "John";

function sayHi() {
alert("Hi, " + name);
}

name = "Pete";

sayHi(); // что будет показано: "John" или "Pete"?

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

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​Замыкание в JavaScript (Часть 2)

Итак, вопрос в том, получит ли она доступ к последним изменениям?

2. Функция makeWorker создаёт другую функцию и возвращает её. Новая функция может быть вызвана откуда-то ещё. Получит ли она доступ к внешним переменным из места своего создания или места выполнения или из обоих?

function makeWorker() {
let name = "Pete";

return function() {
alert(name);
};
}

let name = "John";

// create a function
let work = makeWorker();

// call it
work(); // что будет показано? "Pete" (из места создания) или "John" (из места выполнения)

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Замыкание в JavaScript (Часть 3)

Чтобы понять, что происходит, давайте для начала обсудим, что такое «переменная» на самом деле.

В JavaScript у каждой выполняемой функции, блока кода и скрипта есть связанный с ними внутренний (скрытый) объект, называемый лексическим окружением
LexicalEnvironment.

Объект лексического окружения состоит из двух частей:

1. Environment Record – объект, в котором как свойства хранятся все локальные переменные (а также некоторая другая информация, такая как значение this).

2. Ссылка на внешнее лексическое окружение – то есть то, которое соответствует коду снаружи (снаружи от текущих фигурных скобок).

"Переменная" – это просто
свойство специального внутреннего объекта: Environment Record. «Получить или изменить переменную», означает, «получить или изменить свойство этого объекта».

Например, в этом простом коде только одно лексическое окружение: схема.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev

​🧾 Замыкание в JavaScript (Часть 4)

Это, так называемое, глобальное лексическое окружение, связанное со всем скриптом.
На картинке выше прямоугольник означает Environment Record (хранилище переменных), а стрелка означает ссылку на внешнее окружение. У глобального лексического окружения нет внешнего окружения, так что она указывает на null.
А вот как оно изменяется при объявлении и присваивании переменной: схема.

Прямоугольники с правой стороны демонстрируют, как глобальное лексическое окружение изменяется в процессе выполнения кода:
1. В начале скрипта лексическое окружение пустое.
2. Появляется определение переменной let phrase. У неё нет присвоенного значения, поэтому присваивается undefined.
3. Переменной phrase присваивается значение.
4. Переменная phrase меняет значение.

Пока что всё выглядит просто, правда?

Итого:

- Переменная – это свойство специального внутреннего объекта, связанного с текущим выполняющимся блоком/функцией/скриптом.
- Работа с переменными – это на самом деле работа со свойствами этого объекта.

📋 #JavaScript #Совет
▬▬▬▬▬▬▬▬
// How To WebDev