Javascript строковые функции. Методы javascript для работы со строками

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

Задача. Дана строка "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(стр); // "СТРОКА"

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

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

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

Последовательность	Значение
\0	Символ NUL - пустой символ ("\u0000").
\t	Горизонтальная табуляция ("\u0009").
\n	Перевод на новую строку ("\u000A").
\b	Возврат на одну позицию - то, что происходит при нажатии на клавишу backspace ("\u0008").
\r	Возврат каретки ("\u000D").
\f	Перевод страницы - очистка страницы ("\u000C").
\v	Вертикальная табуляция ("\u000B").
\"	Двойная кавычка ("\u0022").
\"	Одинарная кавычка ("\u0027").
\\	Обратный слэш ("\u005C").
\xNN	Номер символа из набора символов ISO Latin-1, заданный двумя шестнадцатеричными цифрами (N - шестнадцатеричная цифра 0-F). Например, "\x41" (это код буквы "A").
\uNNNN	Номер символа из набора символов Unicode, заданный четырьмя шестнадцатеричными цифрами (N - шестнадцатеричная цифра 0-F). Например, "\u0041" (это код буквы "A"s).

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

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"

Существует несколько способов выбора подстрок в JavaScript, включая substring() , substr() , slice() и функции regexp .

В JavaScript 1.0 и 1.1, substring() существует как единственный простой способ выбора части большей строки. Например, чтобы выбрать строку press из Expression , используйте "Expression".substring(2,7) . Первый параметр для функции - символьный индекс, в котором начинается выбор, в то время как второй параметр - символьный индекс, в котором заканчивается выбор (не включающий): substring(2,7) включает индексы 2, 3, 4, 5, и 6.

В JavaScript 1.2, функции substr() , slice() и regexp могут также использоваться для разбиения строк.

Substr() ведет себя таким же образом, что и substr языка Перл, где первый параметр обозначает символьный индекс, в котором начинается выбор, в то время как второй параметр указывает длину подстроки. Чтобы выполнить ту же самую задачу, как в предыдущем примере, нужно использовать "Expression".substr(2,5) . Помните, 2 - это точка начала, а 5 - длина возникающей в результате подстроки.

При использовании на строках, slice() ведет себя аналогично функции substring() . Это, однако, гораздо более мощное средство, способное функционировать с любым типом массива, и не только со строками. slice() также использует отрицательные смещения для обращения к нужной позиции, начиная с конца строки. "Expression".slice(2,-3) возвратит подстроку, найденную между вторым символом и третьим символом с конца, возвращая опять press.

Последний и наиболее универсальный метод для работы с подстроками - это работа через регулярные функции выражения в JavaScript 1.2. Еще раз, обращая внимание на тот же пример, подстрока "press" получается из строки "Expression" :

Write("Expression".match(/press/));

Встроенный объект String

Объект String — это объектная реализация примитивного строкового значения. Его конструктор имеет вид:

New String(значение ?)

Здесь значение — любое строковое выражение, задающее примитивное значение объекта. Если оно не указано, то примитивное значение объекта равно "" .

Свойства объекта String:

constructor Конструктор, который создал объект. Количество символов в строке. prototype Ссылка на прототип класса объектов.

Стандартные методы объекта String

Возвращает символ, находящийся в данной позиции строки. Возвращает код символа, находящегося в данной позиции строки. Возвращает конкатенацию строк. Создает строку из символов, заданных кодами Unicode. Возвращает позицию первого вхождения заданной подстроки. Возвращает позицию последнего вхождения заданной подстроки. Сравнивает две строки с учетом языка операционной системы. Сопоставляет строку с регулярным выражением. Сопоставляет строку с регулярным выражением и заменяет найденную подстроку новой подстрокой. Ищет сопоставление строки с регулярным выражением. Извлекает часть строки и возвращает новую строку. Разбивает строку на массив подстрок. Возвращает подстроку, заданную позицией и длиной. Возвращает подстроку, заданную начальной и конечной позициями. Преобразует все буквы строки в строчные с учетом языка операционной системы. Преобразует все буквы строки в прописные с учетом языка операционной системы. Преобразует все буквы строки в строчные. Преобразует объект в строку. Преобразует все буквы строки в прописные. Возвращает примитивное значение объекта.

Нестандартные методы объекта String

Создает закладку HTML (…). Заключает строку в теги …. Заключает строку в теги …. Заключает строку в теги …. Заключает строку в теги …. Заключает строку в теги …. Заключает строку в теги …. Заключает строку в теги …. Создает гиперссылку HTML (…). Заключает строку в теги …. Заключает строку в теги …. Заключает строку в теги . Заключает строку в теги .

Свойство length

Синтаксис : объект .length Атрибуты : { DontEnum, DontDelete, ReadOnly }

Значением свойства length является количество символов в строке. Для пустой строки это значение равно нулю.

Метод anchor

Синтаксис : объект .anchor(имя ) Аргументы : имя Результат : строковое значение

Метод anchor объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для создания в HTML-документе закладки с заданным именем . Например, оператор document.write("Мой текст".anchor("Закладка")) эквивалентен оператору document.write("Мой текст") .

Метод big

Синтаксис : объект .big() Результат : строковое значение

Метод big возвращает строку, состоящую из объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста крупным шрифтом. Например, оператор document.write("Мой текст".big()) выведет на экран обозревателя строку Мой текст.

Метод blink

Синтаксис : объект .blink() Результат : строковое значение

Метод blink возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста мигающим шрифтом. Указанные теги не входят в стандарт HTML и поддерживаются только обозревателями Netscape и WebTV. Например, оператор document.write("Мой текст".blink()) выведет на экран обозревателя строку Мой текст.

Метод bold

Синтаксис : объект .bold() Результат : строковое значение

Метод bold возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста полужирным шрифтом. Например, оператор document.write("Мой текст".bold()) выведет на экран обозревателя строку Мой текст .

Метод charAt

Синтаксис : объект .charAt(позиция ) Аргументы : позиция — любое числовое выражение Результат : строковое значение

Метод charAt возвращает строку, состоящую из символа, расположенного в данной позиции примитивного значения строкового объекта . Позиции символов строки нумеруются от нуля до объект . -1. Если позиция лежит вне этого диапазона, то возвращается пустая строка. Например, оператор document.write("Строка".charAt(0)) выведет на экран обозревателя символ С.

Метод charCodeAt

Синтаксис : объект .charCodeAt(позиция ) Аргументы : позиция — любое числовое выражение Результат : числовое значение

Метод charAt возвращает число, равную коду Unicode символа, расположенного в данной позиции примитивного значения строкового объекта . Позиции символов строки нумеруются от нуля до объект . -1. Если позиция лежит вне этого диапазона, то возвращается NaN . Например, оператор document.write("Строка".charCodeAt(0).toString(16)) выведет на экран обозревателя шестнадцатеричный код русской буквы "С": 421 .

Метод concat

Синтаксис : объект .concat(строка0 , строка1 , …, строкаN ) Аргументы : строка0 , строка1 , …, строкаN — любые строковые выражения Результат : строковое значение

Метод concat возвращает новую строку, являющуюся конкатенацией исходной строки и аргументов метода. Этот метод эквивалентен операции

объект + строка0 + строка1 + … + строкаN

Например, оператор document.write("Мороз и солнце. ".concat("День чудесный.")) выведет на экран обозревателя строку Мороз и солнце. День чудесный.

Метод fixed

Синтаксис : объект .fixed() Результат : строковое значение

Метод fixed возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста телетайпным шрифтом. Например, оператор document.write("Мой текст".fixed()) выведет на экран обозревателя строку Мой текст.

Метод fontcolor

Синтаксис : объект .fontcolor(цвет) Аргументы : цвет — строковое выражение Результат : строковое значение

Метод fontcolor возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги цвет >… . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста заданным цветом. Например, оператор document.write("Мой текст".fontcolor("red")) выведет на экран обозревателя строку Мой текст .

Метод fontsize

Синтаксис : объект .fontsize(размер ) Аргументы : размер — числовое выражение Результат : строковое значение

Метод fontsize возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста шрифтом заданного размера. Например, оператор document.write("Мой текст".fontsize(5)) выведет на экран обозревателя строку Мой текст .

Метод fromCharCode

Синтаксис : String.fromCharCode(код1 , код2 , …, кодN ) Аргументы : код1 , код2 , …, кодN — числовые выражения Результат : строковое значение

Метод fromCharCode создает новую строку (но не строковый объект), которая является конкатенацией символов Unicode с кодами код1 , код2 , …, кодN .

Это статический метод объекта String , поэтому для доступа к нему не нужно специально создавать строковый объект. Пример:

Var s = String.fromCharCode(65, 66, 67); // s равно "ABC"

Метод indexOf

Синтаксис : объект .indexOf(подстрока [,начало ]?) Аргументы : подстрока — любое строковое выражение начало — любое числовое выражение Результат : числовое значение

Метод indexOf возвращает первую позицию подстроки в примитивном значении строкового объекта . объект начало начало начало начало больше, чем объект объект

Поиск ведется слева направо. В остальном этом метод идентичен методу . Следующий пример подсчитывает количество вхождений подстроки pattern в строку str .

Function occur(str, pattern) { var pos = str.indexOf(pattern); for (var count = 0; pos != -1; count++) pos = str.indexOf(pattern, pos + pattern.length); return count; }

Метод italics

Синтаксис : объект .italics() Результат : строковое значение

Метод italics возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста курсивным шрифтом. Например, оператор document.write("Мой текст".italics()) выведет на экран обозревателя строку Мой текст .

Метод lastIndexOf

Синтаксис : объект .lastIndexOf(подстрока [,начало ]?) Аргументы : подстрока — любое строковое выражение начало — любое числовое выражение Результат : числовое значение

Метод lastIndexOf возвращает последнюю позицию подстроки в примитивном значении строкового объекта объект . -1. Если задан необязательный аргумент начало , то поиск ведется, начиная с позиции начало ; если нет, то с позиции 0, т. е. с первого символа строки. Если начало отрицательно, то оно принимается равным нулю; если начало больше, чем объект . -1, то оно принимается равным объект . -1. Если объект не содержит данной подстроки, то возвращается значение -1.

Поиск ведется справа налево. В остальном этом метод идентичен методу . Пример:

Var n = "Белый кит".lastIndexOf("кит"); // n равно 6

Метод link

Синтаксис : объект .link(uri ) Аргументы : uri — любое строковое выражение Результат : строковое значение

Метод link возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги uri ">… . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для создания в HTML-документе гиперссылки с заданным uri . Например, оператор document.write("Мой текст".link("#Закладка")) эквивалентен оператору document.write("Мой текст") .

Метод localeCompare

Синтаксис : объект .localeCompare(строка1 ) Аргументы : строка1 — любое строковое выражение Результат : число

Поддержка

Метод localeCompare сравнивает две строки с учетом национальных установок операционной системы. Он возвращает -1, если примитивное значение объекта меньше строки1 , +1, если оно больше строки1 , и 0, если эти значения совпадают.

Метод match

Синтаксис : объект .match(регвыр ) Аргументы : регвыр Результат : массив строк

Метод match регвыр объекта . Результатом сопоставления является массив найденных подстрок или null , если соответствий нет. При этом:

• Если регвыр не содержит опцию глобального поиска, то выполняется метод регвыр .exec (объект ) и возвращается его результат. Результирующий массив содержит в элементе с индексом 0 найденную подстроку, а в остальных элементах — подстроки, соответствующие подвыражениям регвыр , заключенным в круглые скобки.
• Если регвыр содержит опцию глобального поиска, то метод регвыр .exec (объект ) выполняется до тех пор, пока находятся соответствия. Если n — количество найденных соответствий, то результатом является массив из n элементов, которые содержат найденные подстроки. Свойству регвыр .lastIndex присваивается номер позиции в исходной строке, указывающий на первый символ после последнего найденного соответствия, или 0, если соответствий не найдено.

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

Метод replace

Синтаксис : объект .replace(регвыр ,строка ) объект .replace(регвыр ,функция ) Аргументы : регвыр — регулярное выражение строка — строковое выражение функция — имя функции или декларация функции Результат : новая строка

Метод replace сопоставляет регулярное выражение регвыр с примитивным значением строкового объекта и заменяет найденные подстроки другими подстроками. Результатом является новая строка, которая является копией исходной строки с проведенными заменами. Способ замены определяется опцией глобального поиска в регвыр и типом второго аргумента.

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

строка , то замена каждой найденной подстроки производится на нее. При этом строка может содержать такие свойства объекта RegExp , как $1 , …, $9 , lastMatch , lastParen , leftContext и rightContext . Например, оператор document.write("Вкусные яблоки, сочные яблоки.".replace(/яблоки/g, "груши")) выведет на экран обозревателя строку Вкусные груши, сочные груши.

Если вторым аргументом является функция , то замена каждой найденной подстроки производится вызовом этой функции. Функция имеет следующие аргументы. Первый аргумент — это найденная подстрока, затем следуют аргументы, соответствующие всем подвыражениям регвыр , заключенным в круглые скобки, предпоследний аргумент — это позиция найденной подстроки в исходной строке, считая с нуля, и последний аргумент— это сама исходная строка. Следующий пример показывает, как с помощью метода replace можно написать функцию преобразования градусов Фаренгейта в градусы Цельсия. Приведенный сценарий

Function myfunc($0,$1) { return (($1-32) * 5 / 9) + "C"; } function f2c(x) { var s = String(x); return s.replace(/(\d+(\.\d*)?)F\b/, myfunc); } document.write(f2c("212F"));

выведет на экран обозревателя строку 100C .

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

Пример использования replace

Замена всех вхождений подстроки в строку

Часто случается, что нужно заменить все вхождения одной строки в другую строку:

Var str = "foobarfoobar"; str=str.replace(/foo/g,"xxx"); // в итоге получиться str = "xxxbarxxxbar";

Метод search

Синтаксис : объект .search(регвыр ) Аргументы : регвыр — любое регулярное выражение Результат : числовое выражение

Метод search сопоставляет регулярное выражение регвыр с примитивным значением строкового объекта . Результатом сопоставления является позиция первой найденной подстроки, считая с нуля, или -1, если соответствий нет. При этом опция глобального поиска в регвыр игнорируется, и свойства регвыр не изменяются. Примеры:

Метод slice

Синтаксис : объект .slice(начало [,конец ]?) Аргументы : начало и конец — любые числовые выражения Результат : новая строка

Метод slice объекта , от позиции начало до позиции конец , не включая ее. Если конец начало и до конца исходной строки.

Позиции символов строки нумеруются от нуля до объект . -1. Если значение начало объект . +начало . Если значение конец отрицательно, то оно заменяется на объект . +конец . Иными словами, отрицательные аргументы трактуются как смещения от конца строки.

Результатом является строковое значение, а не строковый объект. Например, оператор document.write("ABCDEF".slice(2,-1)) выведет на экран обозревателя строку CDE .

Метод small

Синтаксис : объект .small() Результат : строковое значение

Метод small возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста мелким шрифтом. Например, оператор document.write("Мой текст".small()) выведет на экран обозревателя строку Мой текст.

Метод split

Синтаксис : объект .split(разделитель [,число ]?) Аргументы : разделитель — строковое или регулярное выражение число — числовое выражение Результат : массив строк (объект Array )

Метод split разбивает примитивное значение объекта на массив подстрок и возвращает его. Разбиение на подстроки производится следующим образом. Исходная строка просматривается слева направо в поисках разделителя . Как только он найден, подстрока от конца предыдущего разделителя (или от начала строки, если это первое вхождение разделителя) до начала найденного добавляется в массив подстрок. Таким образом, сам разделитель в текст подстроки не попадает.

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

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

В следующем примере регулярное выражение используется для задания тегов HTML в качестве разделителя. Оператор

выведет на экран обозревателя строку Текст,полужирный, и,курсивный.

Метод strike

Синтаксис : объект .strike() Результат : строковое значение

Метод strike возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги … . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста перечеркнутым шрифтом. Например, оператор document.write("Мой текст".strike()) выведет на экран обозревателя строку Мой текст.

Метод sub

Синтаксис : объект .sub() Результат : строковое значение

Метод sub возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги  . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста как нижнего индекса. Например, оператор document.write("Мой текст".sub()) выведет на экран обозревателя строку Мой текст.

Метод substr

Синтаксис : объект .substr(позиция [,длина ]?) Аргументы : позиция и длина — числовые выражения Результат : строковое значение

Метод substr возвращает подстроку примитивного значения строкового объекта , начинающуюся с данной позиции и содержащую длина символов. Если длина не задана, то возвращается подстрока, начиная с данной позиции и до конца исходной строки. Если длина отрицательна или равна нулю, то возвращается пустая строка.

Позиции символов строки нумеруются от нуля до объект . -1. Если позиция больше или равна объект ., то возвращается пустая строка. Если позиция отрицательна, то она трактуется как смещение от конца строки, т. е. заменяется на объект .+позиция .

Примечание . Если позиция отрицательна, то Internet Explorer ошибочно заменяет ее на 0, поэтому в целях совместимости этот вариант использовать не следует.

Var src = "abcdef"; var s1 = src.substr(1, 3); // "bcd" var s2 = src.substr(1); // "bcdef" var s3 = src.substr(-1); // "f", но в MSIE: "abcdef"

Метод substring

Синтаксис : объект .substring(начало [,конец ]) Аргументы : начало и конец — числовые выражения Результат : строковое значение

Метод substring возвращает подстроку примитивного значения строкового объекта , от позиции начало до позиции конец , не включая ее. Если конец не задан, то возвращается подстрока, начиная с позиции начало и до конца исходной строки.

Позиции символов строки нумеруются от нуля до объект . -1. Отрицательные аргументы или равные NaN заменяются на нуль; если аргумент больше длины исходной строки, то он заменяется на нее. Если начало больше конца , то они меняются местами. Если начало равно концу , то возвращается пустая строка.

Результатом является строковое значение, а не строковый объект. Примеры:

Var src = "abcdef"; var s1 = src.substring(1, 3); // "bc" var s2 = src.substring(1, -1); // "a" var s3 = src.substring(-1, 1); // "a"

Метод sup

Синтаксис : объект .sup() Результат : строковое значение

Метод sup возвращает строку, состоящую из примитивного значения строкового объекта , заключенного в теги  . Проверки на то, не была ли исходная строка уже заключена в эти теги, не делается. Этот метод используется совместно с методами document.write и document.writeln для отображения текста как верхнего индекса. Например, оператор document.write("Мой текст".sup()) выведет на экран обозревателя строку Мой текст.

Метод toLocaleLowerCase

Синтаксис : объект .toLocaleLowerCase() Результат : новая строка

Поддержка : Internet Explorer Поддерживается с версии 5.5. Netscape Navigator Не поддерживается.

Метод toLocaleLowerCase возвращает новую строку, в которой все буквы исходной строки заменены на строчные с учетом национальных установок операционной системы. Остальные символы исходной строки не изменяются. Исходная строка остается прежней. Обычно этот метод возвращает тот же результат, что и ; отличие возможно только в том случае, если кодировка языка противоречит правилам Unicode по преобразованию прописных букв в строчные.

Метод toLocaleUpperCase

Синтаксис : объект .toLocaleUpperCase() Результат : новая строка

Поддержка : Internet Explorer Поддерживается с версии 5.5. Netscape Navigator Не поддерживается.

Метод toLocaleUpperCase возвращает новую строку, в которой все буквы исходной строки заменены на прописные с учетом национальных установок операционной системы. Остальные символы исходной строки не изменяются. Исходная строка остается прежней. Обычно этот метод возвращает тот же результат, что и ; отличие возможно только в том случае, если кодировка языка противоречит правилам Unicode по преобразованию строчных букв в прописные.

Метод toLowerCase

Синтаксис : объект .toLowerCase() Результат : новая строка

Метод toLowerCase возвращает новую строку, в которой все буквы исходной строки заменены на строчные. Остальные символы исходной строки не изменяются. Исходная строка остается прежней. Например, оператор document.write("объект String".toLowerCase()) выведет на экран обозревателя строку объект string .

Всем привет и с наступающим новым годом. Поехали! Начнем мы с рассмотрения свойства length которое позволяет нам посчитать количество символов в строке:

Var str = "методы и свойства для работы со строками в javaScript"; console.log(str.length);

как видите в консоли выведен результат, количество символов строки(54).

Var str = "методы и свойства для работы со строками в javaScript"; console.log(str.charAt(7));

с помощью метода charAt() мы можем по заданной позиции получить символ строки, в нашем случае нам возвращается символ "и" на 7 позиции. Отмечу что отчет позиций строки начинается с нуля. К примеру если мы хотим получить первый символ строки:

Var str = "методы и свойства для работы со строками в javaScript"; str.charAt(0);

здесь нам вернется "м". Еще есть похожий метод charCodeAt() ОН РАБОТАЕТ ТОЧНО ТАКЖЕ КАК И charAt(), но возвращает уже не сам символ, а его код.

Var str = "методы и свойства для работы со строками в javaScript"; console.log(str.charCodeAt(0));

Нам вернется код символа "м" (1084).

Метод charAt() полезен для извлечения одиночного символа из строки, если же мы хотим получить набор символов(подстроку), то для этих целей подойдут следующие методы:

Var str = "методы и свойства для работы со строками в javaScript"; console.log(str.slice(8,17));

метод slice() возвращает подстроку("свойства"), в качестве аргументов принимает два числовых значения, начальный и конечный индекс подстроки. Другой похожий метод substr():

Var str = "методы и свойства для работы со строками в javaScript"; console.log(str.substr(8,17));

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

Var str = "методы и свойства для работы со строками в javaScript"; console.log(str.toUpperCase());

метод toUpperCase() возвращает нам строку где все символы в верхнем регистре, то есть большими буквами.

Var str = "MBA"; console.log(str.toLowerCase());

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

Для поиска подстроки в строке мы можем воспользоваться методом indexOf():

Var str = "методы и свойства для работы со строками в javaScript"; document.write(str.indexOf("работы"));

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

Var str = "методы и свойства для работы со строками в javaScript"; document.write(str.indexOf("работа"));

нам вернется значение -1. Пример:

Var str = "методы и свойства для работы со строками в javaScript", sub = "работа"; function indexOf(str, substr) { if (str.indexOf(substr) === -1) { return "Данной подстроки ""+substr+"" не содержится в строке ""+str+"""; } else{ index =str.indexOf(substr) return "Подстрока ""+substr+"" найдена в позиции "+index; } } document.write(indexOf(str,sub));

здесь мы записали небольшую функцию indexOf(str,sub) которая в качестве аргументов принимает строку(str) и подстроку(sub) и с помощью метода indexOf() проверяет наличие подстроки в строке и возвращает сообщение об результате. Отмечу что метод indexOf() возвращает позицию подстроки относительно начала строки, то есть от нулевого индекса.

Если мы захотим найти позицию подстроки относительно конца, тогда можно воспользоваться функцией lastIndexOf().

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

Var str = " методы и свойства для работы со строками в javaScript "; console.log(str);

и мы хотим убрать пробелы в начале и конце:

Console.log(str.trim());

после того как мы воспользуемся методом trim() пробелы из конца и начала строки будут успешно удалены.

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

Я поздравляю вас с наступающим новым годом, желаю счатья, здоровья, успехов, любви и конечно же удачи! Пока!

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

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

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

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

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

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

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

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

переношу

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

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

1 2 3

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

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».

1 2 3 4

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

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) .