Задача . Поиск и замена

Задача. Дана строка "aaa@bbb@ccc" . Замените все @ на "!" с помощью глобального поиска и замены.

Решение: в данном случае необходимо воспользоваться методом replace , который выполняет поиск и замену. Однако, при простом варианте использования, эта метод найдет и заменит только первое совпадение :

Var str = "aaa@bbb@ccc"; alert(str.replace("@", "!")); //получим "aaa!bbb@ccc"

Чтобы заменить все совпадения, воспользуемся глобальным поиском с помощью регулярного выражения :

Var str = "aaa@bbb@ccc"; alert(str.replace(/@/g, "!")); //получим "aaa!bbb!ccc"

Задача . Методы substr, substring, slice

Задача. Дана строка "aaa bbb ccc" . Вырежите из нее слово "bbb" тремя разными способами (через substr , substring , slice).

Решение: слово "bbb" начинается с символа номер 4 (нумерация с нуля), а заканчивается символом номер 6. Воспользуемся указанными методами:

Var str = "aaa bbb ccc"; alert(str.substr(4, 3)); //substr(откуда отрезать, сколько отрезать) alert(str.substring(4, 7)); //substring(откуда отрезать, докуда отрезать) alert(str.slice(4, 7)); //slice(откуда отрезать, докуда отрезать)

Обратите внимание на то, что в методах substring и slice второй параметр должен быть на 1 больше того символа, который мы хотим забрать (то есть, если указать число 7 - то отрезание произойдет до 6 символа включительно).

Задача . Преобразование формата даты

Задача. В переменной date лежит дата в формате "2025-12-31" "31/12/2025" .

Решение: с помощью метода split разобьем нашу строку "2025-12-31" в массив по разделителю "-" , при этом в нулевом элементе окажется год, в первом - месяц, во втором - день:

Var str = "2025-12-31"; var arr = split("-"); alert(arr);//получим массив ["2025", "12", "31"]

Теперь, обращаясь к разным элементам массива по их ключам, сформируем нужную нам строку:

Var str = "2025-12-31"; var arr = split("-"); var newStr = arr + "/" + arr + "/"+arr; alert(newStr); //получим строку "31/12/2025"

Задачи для решения

Работа с регистром символов

Дана строка "js" . Сделайте из нее строку "JS" .

Дана строка "JS" . Сделайте из нее строку "js" .

Работа с length, substr, substring, slice. Работа с indexOf

Дана строка "я учу javascript!" . Найдите количество символов в этой строке.

Дана строка "я учу javascript!" . Найдите позицию подстроки "учу" .

Дана переменная str , в которой хранится какой-либо текст. Реализуйте обрезание длинного текста по следующему принципу: если количество символов этого текста больше заданного в переменной n, то в переменную result запишем первые n символов строки str и добавим в конец троеточие "...". В противном случае в переменную result запишем содержимое переменной str .

Работа с replace

Дана строка "Я-учу-javascript!" . Замените все дефисы на "!" с помощью глобального поиска и замены.

Работа с split

Дана строка "я учу javascript!" . С помощью метода split запишите каждое слово этой строки в отдельный элемент массива.

Дана строка "я учу javascript!" . С помощью метода split запишите каждый символ этой строки в отдельный элемент массива.

В переменной date лежит дата в формате "2025-12-31" . Преобразуйте эту дату в формат "31.12.2025" .

Работа с join

Дан массив ["я", "учу", "javascript", "!"] . С помощью метода join преобразуйте массив в строку "я+учу+javascript+!" .

Задачи

Преобразуйте первую букву строки в верхний регистр.

Преобразуйте первую букву каждого слова строки в верхний регистр.

Преобразуйте строку "var_test_text" в "varTestText" . Скрипт, конечно же, должен работать с любыми аналогичными строками.

• Урок №
  плейлист на ютуб
  Практическое применение ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Тип данных строка (string) используется для представления текста. Соответственно, значениями типа string является текст. Любой текст в JavaScript является строкой.

Кавычки

Строки в JavaScript должны быть заключены в кавычки. В JavaScript существует три вида кавычек: двойные (" "), одинарные (" ") и обратные (` `):

"Строка в двойных кавычках" "Строка в одинарных кавычках" `Строка в обратных кавычках`

Вид кавычек в начале и конце строки должен совпадать.

Строки могут состоять из нуля и более символов:

"" // Пустая строка "Строка" // Не пустая строка

Строки с двойными и одинарными кавычками ничем не отличаются между собой по функционалу - они могут содержать лишь текст и управляющие последовательности. А вот строки с обратными кавычками имеют более широкий функционал. Такие строки могут содержать так называемые подстановки , обозначаемые знаком доллара и фигурными скобками ${выражение} . Подстановки могут содержать любые произвольные выражения:

Let стр = "Мир!"; let стр2 = `Привет, ${стр}`; // Использование переменной в строке alert(стр2); // Привет, Мир! alert(`2 + 3 = ${2 + 3}.`); // 2 + 3 = 5.

Выражение, расположенное в подстановке (${...}) вычисляется, и его результат становится частью строки.

Строки в обратных кавычках могут занимать более одной строки, сохраняя все пробельные символы:

Let числа = `Числа: 1 2`; alert(числа); // Числа: // 1 // 2

Строки с обратными кавычками называются строками-шаблонами или шаблонными литералами .

Строки, заключённые в одни кавычки, могут содержать другие кавычки:

"одинарные "кавычки" и `обратные` внутри двойных" "а здесь "так" и `так`!" `а здесь "так" и "так"!`

Для удобства, большие строковые литералы можно разбивать на несколько строк, заканчивая каждую строку, кроме последней, символом \ :

Alert("это всё одна \ длинная \ строка"); // это всё одна длинная строка alert("это всё одна \ длинная \ строка"); // это всё одна длинная строка alert(`это всё одна \ длинная \ строка`); // это всё одна длинная строка

Кодировка символов строки

Вне зависимости от того, какая кодировка установлена для страницы, в JavaScript для строк всегда используется кодировка UTF-16.

В JavaScript строка - это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет символ Unicode. Для представления символов Unicode в JavaScript используется кодировка UTF-16. Символы включают в себя буквы, цифры, знаки пунктуации, специальные символы и пробельные символы.

Длина строки

Длина строки - это количество 16-битных значений (а не самих символов), содержащихся в ней. Длину строки содержит свойство length:

Alert("Привет".length); // 6

Символы, кодовые пункты которых не умещаются в 16 бит, обрабатываются в соответствии с правилами кодировки UTF-16 как последовательности из двух 16-битных значений. Это означает, что строка, имеющая длину, равную 2 (два 16-битных значения), на деле может представлять единственный символ:

Alert("a".length); // 1 alert("𝑒".length); // 2

Нумерация и доступ к символам строки

Как уже было сказано, строка представляет собой упорядоченную последовательность 16-битных значений, каждому из которых соответствует определённый символ. Нумерация 16-битных значений в строке начинается с нуля, т. е. первое 16-битное значение находится под индексом 0, второе - под индексом 1 и т. д. Индекс - это порядковый номер.

Получить символ строки (состоящий из одного 16-битного значения) можно с помощью индекса, заключённого в квадратные скобки [индекс] :

Let стр = "Привет"; alert(стр); // П alert(стр); // В

Чтобы с помощью индексов обратиться к символу, состоящему из двух 16-битных значений, нужно, используя конкатенацию, написать эти индексы так, чтобы в результате получилась последовательность из двух 16-битных значений:

Let стр = "𝑒"; alert(стр + стр); // "𝑒"

Строки неизменяемые

В JavaScript строки неизменяемые. Это значит, что в уже существующей строке нельзя менять никакие символы или добавлять в неё что-то новое.

Так как строки неизменяемые, то методы, используемые для работы со строками, возвращают новые строки, а не изменяют ту строку, относительно которой они были вызваны:

Let стр = "Привет!"; alert(стр.toUpperCase()); // "HELLO" - новое возвращаемое методом значение alert(стр); // "hello" - первоначальная строка не изменена

Чтобы изменить строку, можно создать новую строку и записать её в ту же самую переменную вместо старой строки:

Let стр = "Строка"; стр = стр.toUpperCase(); alert(стр); // "СТРОКА"

Управляющие последовательности

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

В таблице ниже представлены управляющие последовательности:

Управляющие последовательности могут находиться в любом месте строки:

Alert("Греческая буква сигма: \u03a3."); // Греческая буква сигма: Σ. alert("Многострочная\nстрока") // Многострочная // строка alert("внутри используются \"двойные\" кавычки"); // внутри используются "двойные" кавычки

Если символ \ предшествует любому символу, отличному от приведённых в таблице, то он просто игнорируется интерпретатором:

Alert("\k"); // "k"

Символы Unicode, указываемые с помощью управляющей последовательности, можно использовать не только внутри строковых литералов, но и в идентификаторах:

Let a\u03a3 = 5; alert(a\u03a3); // 5

Конкатенация

Конкатенация - это объединение двух или более строк в одну большую. Объединение происходит с помощью оператора + (плюс). При конкатенации каждая последующая строка добавляется в конец предыдущей:

Var str1 = "Hello "; var str2 = "World!"; document.write(str1 + str2 + "
"); // "Hello World!" document.write(str1 + "World!"); Попробовать »

Значение любого типа, которое объединяется со строкой, будет неявно (автоматически) преобразовано в строку и далее будет произведена конкатенация.

Var str1 = "Hello "; alert(str1 + 1); // "Hello 1" alert(true + str1); // "trueHello" alert(str1 + NaN); // "Hello NaN"

Задача . Поиск и замена

Задача. Дана строка "aaa@bbb@ccc" . Замените все @ на "!" с помощью глобального поиска и замены.

Решение: в данном случае необходимо воспользоваться методом replace , который выполняет поиск и замену. Однако, при простом варианте использования, эта метод найдет и заменит только первое совпадение :

Var str = "aaa@bbb@ccc"; alert(str.replace("@", "!")); //получим "aaa!bbb@ccc"

Чтобы заменить все совпадения, воспользуемся глобальным поиском с помощью регулярного выражения :

Var str = "aaa@bbb@ccc"; alert(str.replace(/@/g, "!")); //получим "aaa!bbb!ccc"

Задача . Методы substr, substring, slice

Задача. Дана строка "aaa bbb ccc" . Вырежите из нее слово "bbb" тремя разными способами (через substr , substring , slice).

Решение: слово "bbb" начинается с символа номер 4 (нумерация с нуля), а заканчивается символом номер 6. Воспользуемся указанными методами:

Var str = "aaa bbb ccc"; alert(str.substr(4, 3)); //substr(откуда отрезать, сколько отрезать) alert(str.substring(4, 7)); //substring(откуда отрезать, докуда отрезать) alert(str.slice(4, 7)); //slice(откуда отрезать, докуда отрезать)

Обратите внимание на то, что в методах substring и slice второй параметр должен быть на 1 больше того символа, который мы хотим забрать (то есть, если указать число 7 - то отрезание произойдет до 6 символа включительно).

Задача . Преобразование формата даты

Задача. В переменной date лежит дата в формате "2025-12-31" "31/12/2025" .

Решение: с помощью метода split разобьем нашу строку "2025-12-31" в массив по разделителю "-" , при этом в нулевом элементе окажется год, в первом - месяц, во втором - день:

Var str = "2025-12-31"; var arr = split("-"); alert(arr);//получим массив ["2025", "12", "31"]

Теперь, обращаясь к разным элементам массива по их ключам, сформируем нужную нам строку:

Var str = "2025-12-31"; var arr = split("-"); var newStr = arr + "/" + arr + "/"+arr; alert(newStr); //получим строку "31/12/2025"

Задачи для решения

Работа с регистром символов

Дана строка "js" . Сделайте из нее строку "JS" .

Дана строка "JS" . Сделайте из нее строку "js" .

Работа с length, substr, substring, slice. Работа с indexOf

Дана строка "я учу javascript!" . Найдите количество символов в этой строке.

Дана строка "я учу javascript!" . Найдите позицию подстроки "учу" .

Дана переменная str , в которой хранится какой-либо текст. Реализуйте обрезание длинного текста по следующему принципу: если количество символов этого текста больше заданного в переменной n, то в переменную result запишем первые n символов строки str и добавим в конец троеточие "...". В противном случае в переменную result запишем содержимое переменной str .

Работа с replace

Дана строка "Я-учу-javascript!" . Замените все дефисы на "!" с помощью глобального поиска и замены.

Работа с split

Дана строка "я учу javascript!" . С помощью метода split запишите каждое слово этой строки в отдельный элемент массива.

Дана строка "я учу javascript!" . С помощью метода split запишите каждый символ этой строки в отдельный элемент массива.

В переменной date лежит дата в формате "2025-12-31" . Преобразуйте эту дату в формат "31.12.2025" .

Работа с join

Дан массив ["я", "учу", "javascript", "!"] . С помощью метода join преобразуйте массив в строку "я+учу+javascript+!" .

Задачи

Преобразуйте первую букву строки в верхний регистр.

Преобразуйте первую букву каждого слова строки в верхний регистр.

Преобразуйте строку "var_test_text" в "varTestText" . Скрипт, конечно же, должен работать с любыми аналогичными строками.

• Урок №
  плейлист на ютуб
  Практическое применение ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Приветствую всех, кто основательно решил изучить прототипно-ориентированный язык. В прошлый я рассказал вам про , а сегодня мы будем разбирать строки JavaScript-а. Так как в этом языке все текстовые элементы являются строками (нет отдельного формата для символов), то вы можете сами догадаться, что этот раздел занимает значимую часть в изучении синтаксиса js.

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

Синтаксис строчных переменных

В языке js все переменные объявляются при помощи ключевого слова var, а далее в зависимости от формата оформления параметров определяется тип объявленной переменной. Как вы помните из , в JavaScript-е отсутствует строгая типизация. Именно поэтому в коде и обстоит вот такая ситуация.

При инициализации переменных значения могут быть обрамлены в двойные, одинарные, а начиная с 2015 года и в скошенные одинарные кавычки. Ниже я прикрепил примеры каждого способа объявления строк.

Хочу уделить особое внимание третьему способу. Он обладает рядом преимуществ.

С его помощью можно спокойно осуществлять перенос строки и это будет выглядеть вот так:

alert (`несколько

переношу

А еще третий способ позволяет использовать конструкцию ${…}. Такой инструмент нужен для вставки интерполяции. Не пугайтесь, сейчас расскажу, что это такое.

Благодаря ${…} в строки можно вставлять не только значения переменных, а еще и выполнять с ними арифметические и логические операции, вызывать методы, функции и т.д. Все это называется одним терминов – интерполяция. Ознакомьтесь с примером реализации данного подхода.

var pen = 3; var pencil = 1; alert(`${pen} + ${pencil*5} = ${pen + pencil}`);

В результате на экран выведется выражение: «3 + 1*5 = 8».

Что касается первых двух способов объявления строк, то в них разницы никакой нет.

Поговорим немного о специальных символах

Во многих языках программирования есть специальные символы, которые помогают управлять текстом в строках. Самый известный среди них – это перенос строки (\n) .

Все аналогичные инструменты изначально начинаются с обратного слеша (\) и после идут буквы английского алфавита.

Ниже я прикрепил небольшую табличку, в которой перечислены некоторые специальные символы.

Запасаемся тяжелым арсеналом методов и свойств

Разработчиками языка было предусмотрено множество методов и свойств для упрощения и оптимизации работы со строками. А с выпуском в свет нового стандарта под названием ES-2015 в прошлом году, этот список пополнился новенькими инструментами.

Length

Начну с самого популярного свойства, которое помогает узнать длину значений строчных переменных. Это length . Он используется таким образом:

var string = «Единороги»;

alert (string.length);

В ответе будет выведено число 9. Также данное свойство можно применять и к самим значениям:

«Единороги».length;

Результат не изменится.

charAt ()

Этот метод позволяет вытащить определенный символ из текста. Напоминаю, что нумерация начинается с нуля, поэтому чтобы вытащить первый символ из строки, необходимо прописать вот такие команды:

var string = «Единороги»;

alert (string.charAt (0));.

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

От toLowerCase () к toUpperCase ()

Данные методы управляют регистром символов. При написании кода «Контент».

toUpperCase () все слово будет отображено заглавными буквами.

Для противоположного эффекта стоит использовать «Контент». toLowerCase () .

indexOf ()

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

var text = "Организовать поиск цветов!"; alert(text.indexOf("цвет")); //19 alert(text.indexOf(" ")); //12 alert(text.lastIndexOf(" ")); //18

Заметьте, lastIndexOf () выполняет те же действия, только поиск осуществляется с конца предложения.

Извлечение подстрок

Для этого действия в js было создано три примерно одинаковых метода.

Разберем сначала substring (start, end) и slice (start, end) . Работают одинаково. Первый аргумент определяет начальную позицию, с которой будет начинаться извлечение, а второй отвечает за конечный пункт остановки. В обоих методах строка извлекается, не включая символ, который расположен на позиции end.

var text = "Атмосфера"; alert(text.substring(4)); // выведет «сфера» alert(text.substring(2, 5)); //отобразит «мос» alert(text.slice(2, 5)); //отобразит «мос»

А теперь разберем третий метод, который называется substr () . В нем также нужно прописывать 2 аргумента: start и length .

Первый указывает начальную позицию, а второй – количество символов, которые нужно извлечь. Чтобы отследить разницу между этими тремя инструментами, я воспользовался прошлым примером.

var text = «Атмосфера»;

alert (text.substr (2, 5)); //отобразит «мосфе»

Используя перечисленные средства взятия подстрок, можно удалить ненужные символы из новых строчных элементов, с которыми далее работает программа.

Replase ()

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

В этом примере заменится подстрока только в первом слове.

var text = "Атмосфера Атмосфера"; var newText = text.replace("Атмо","Страто") alert(newText) // Результат: Стратосфера Атмостфера

А в этой программной реализации из-за флага регулярного выражения “g” будет выполнена глобальная замена.

var text = "Атмосфера Атмосфера"; var newText = text.replace(/Атмо/g,"Страто") alert(newText) // Результат: Стратосфера Стратосфера

Займемся конвертацией

В JavaScript предусмотрено только три вида преобразования типов объектов:

1. Числовое;
2. Строковое;
3. Логическое.

В текущей публикации я расскажу про 2 из них, так как знание о них нужнее для работы со строками.

Числовое преобразование

Чтобы значение элемента явно преобразовать к числовому виду, можно использовать Number (value) .

Есть и более короткое выражение: +«999» .

var a = Number («999»);

Строковая конвертация

Выполняется функцией alert , а также явным вызовом String (text) .

Приветствую всех читателей блога сайт В этой статье мы рассмотрим встроенный объект jscript – String, который отвечает за обработку текста.

Внутренний класс js String языка программирования сервера сценариев предоставляет методы для работы со строками, например, поиск подстроки, парсинг или замена. У него есть одно свойство length , которое возвращает длину строки. Нужно помнить, что . Для объявления класса нет необходимости использовать ключевое слово new и String .

Давайте рассмотрим простой пример:

Видим, что тут мы объявили две переменные s1 и s2, обе хранят текстовое значение "простой текст ", с помощью свойства length мы определили их длину. Как видим, можно использовать как упрощенный формат, так и более громоздкий (ключевые слова new).

Давайте рассмотрим основные методы класса String.

Методы класса String JS

s.charAt (index) – Получить символ с заданным индексом (index) из s.

s.charCodeAt (index) – Извлекаем заданный код символа в кодировке Unicode через его индекс (index) из s.

s1.concat (s2) – Конкатенация (объединение) s1и s2.

String.fromCharCode (c1,...,cN) - Сформировать unicode-строку. Вместо символов мы прописывает коды Unicode .

s.indexOf (substr, startindex) – Данный метод js String класса позволяет производить поиск подстроки substr в строке s. Параметр startindex задает номер знака, с которого следует начинать поиск, если данный параметр отсутствует, то поиск производится с самого начала. Сам процесс происходит слева на право . indexOf возвращает число – индекс знака, начиная с которого найдено вхождение, если ничего не найдено, то будет возвращено значение -1. Не забываем, что нумерация символов начинается с нуля .

s.lastIndexOf (substr, startindex) – Аналогично indexOf, но искать будем в обратном порядке.

s.match (rgExp) – Данный метод js класса String позволяет искать в тексте s, используя регулярные выражения (rgExp). В результате, будет получен массив, содержащий результат. Первый элемент массива – найденный текст, второй – подстрока соответствующая первому подвыражению, третий - подстрока соответствующая второму подвыражению, и так далее. Для примера, мы рассмотрим сценарий, который производит парсинг url адреса.

s.slice (start, ) – Получить часть из текста s, параметры start и end задают соответственно начальную и конечную позицию, и являются целыми числами.

s.split (str) – Разбить текст s на подстроки, и прописать их как . Параметр str определяет символьный знак, являющийся признаком начала разбиения. На выходе мы получаем массив.

s.substr (start [, length]) – Аналогично slice, но тут мы указываем не конечный индекс, а длину.

s.substring (index1, index2) – Позволяет получить подстроку из заданной s строчки. substring не изменяет исходного значения. Параметры задают позиции начального и конечного знака.