ВходJavascript: работа со строками, функции. JavaScript: методы работы со строками 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 предусмотрено только три вида преобразования типов объектов:
- Числовое;
- Строковое;
- Логическое.
В текущей публикации я расскажу про 2 из них, так как знание о них нужнее для работы со строками.
Числовое преобразование
Чтобы значение элемента явно преобразовать к числовому виду, можно использовать Number (value) .
Есть и более короткое выражение: +«999» .
var a = Number («999»);
Строковая конвертация
Выполняется функцией alert , а также явным вызовом String (text) .
В этой статье речь пойдет о том, что такое строки в JavaScript и методах работы с ними.
Строки — это просто группы символов, такие как « JavaScript », « Hello world! », « http://www.quirksmode.org » или даже « 14 ». Для программирования на JavaScript Вам необходимо знать, что такое строки и как с ними работать, т. к. использовать их придется очень часто. Многие вещи, такие как URL -страницы, значения CSS -параметров и элементов ввода форм — все является строками.
Сначала постараюсь объяснить работы со строками , затем — разницу между в JavaScript. Даже если у Вас есть опыт программирования на другом языке, внимательно прочтите эту часть. В конце я расскажу о самых важных строк в JavaScript .
Основы работы со строками
Давайте рассмотрим основы работы со строками в JavaScript.
Использование кавычек
Когда Вы объявляете строки в JavaScript или работаете с ними, всегда заключайте их в одинарные или двойные кавычки. Этим Вы объясняете браузеру, что он имеет дело со строкой. Не смешивайте использование кавычек в коде, если Вы начали строку с одинарной кавычки, а закончили двойной, JavaScript не поймет, что Вы имели в виду. Как правило, я использую одинарные кавычки для работы со строками, так как двойные кавычки я решил использовать для HTML , а одинарные — для JavaScript. Конечно, Вы можете делать все по-другому, но я советую вам придумать подобное правило для себя.
Давайте представим две строки, которые мы будем использовать на протяжении всей статьи:
Var a = "Hello world!"; var b = "I am a student.";
Сейчас мы объявили две переменные, « a » и « b », и присвоили им строковые значения. После этого мы можем с ними работать, но сначала решим одну проблему: допустим, я написал:
Var b = "I"m a student.";
Строка содержит в себе лишнюю одинарную кавычку, и JavaScript думает, что строка закончена и выводит сообщение об ошибке, не понимая, что следует дальше. Поэтому Вам нужно экранировать кавычку , сообщая браузеру, что её нужно рассматривать как символ, а не как окончание строки. Это осуществляется с помощью «обратного слеша» перед кавычкой:
Var b = "I\"m a student.";
Заметьте, что Вы можете вставлять в строку двойные кавычки без их экранирования. Так как Вы используете одинарные кавычки, как начало и конец строки,
Var b = "I\"m a "student".";
воспринимается без проблем. Двойные кавычки автоматически рассматриваются, как части строки, а не команды.
Встроенные функции
После определения строк можно начать их использование. Например, Вы можете соединить одну строку с другой , или взять из строки « b » подстроку, состоящую из второго—четвертого символов и вставить их в середину строки « a », или определить какой символ стоит двенадцатым в « a », сколько символов в « b », есть ли в них буква «q» и т. д.
Для этого Вы можете использовать встроенные функции, которые JavaScript предопределяет для каждой строки. Одна из них — «length» — возвращает длину строки. То есть если Вы хотите вычислить длину «Hello world!», напишите:
Var c = "Hello world!".length;
Ранее мы присвоили эту строку переменной « а ». Таким образом, Вы сделали переменную « a » строкой, поэтому к ней тоже применима функция «length», и следующая операция даст такой же результат:
Var c = a.length;
Запомните, что Вы можете использовать «length» для любой строки — это встроенная функция. Вы можете вычислить длину любой строки , например: « location.href » или « document.title » или объявленной Вами.
Ниже я представлю список распространенных встроенных методов и свойств.
Строки и числа
В некоторых языках программирования от Вас требуется указывать, является ли переменная числом или строкой, перед тем, как делать с ней что-либо ещё. JavaScript проще относится к разнице между строками и числами. Фактически Вы даже можете складывать числа со строками:
Var c = a + 12;
В некоторых языках программирования обработка такой строки приведет к ошибке. Всё же « a » — это строка, а «12» — число. Однако JavaScript пытается решить проблему, предполагая, что «12» — тоже строка. Таким образом « с » принимает значение « Hello world!12 ». Значит, если Вы используете «+» со строкой и числом, JavaScript пытается сделать из числа строку. Если же Вы применяете математические операции к строке, JavaScript пробует превратить её в число. При отсутствии возможности перевода строки в число (например, из-за наличия в ней букв), JavaScript возвращает NaN — «Not a Number — не является числом».
Наконец, в JavaScript нет разницы между целыми величинами и числами с плавающей точкой.
Число → строка
Для преобразования числа в строку введите:
Var c = (16 * 24) / 49 + 12; d = c.toString();
После этого Вы можете применять к « d » все строковые методы, а « c » все ещё содержит число.
Строка → число
Если Вы хотите преобразовать строку в число, сначала убедитесь, что она состоит только из символов 0—9 . Для этого я просто умножаю строку на 1 .
Var c = "1234"; d = c * 1;
Так как умножение производится только с числами, JavaScript превращает строку в число, если это возможно. В противном случае, результат — NaN .
Заметим, если написать:
Var c = "1234"; d = c + 0;
Результатом будет « 12340 », потому что JavaScript использует «+» для соединения строк, а не их сложения.
Строковые свойства и методы
Так что же мы можем делать со строками? Объединение — это особый случай, но все остальные команды (методы) могут использоваться с любой строкой с помощью конструкции:
Имя_строки.метод();
Список встроенных методов JavaScript для работы со строками
Конкатенация — объединение строк
Во-первых, Вы можете объединить строки, сложив их вместе, вот так:
Document.write(a + b);
в результате получится: « Hello world!I am a student. ». Но, конечно же, Вы хотите, чтобы между предложениями был пробел. Для этого запишем код следующим образом:
Document.write(a + " " + b);
Так мы соединим три строки: « а », « " " » (один пробел) и « b », в итоге получив: « Hello world! I am a student. »
Вы можете использовать даже числа или вычисления, например:
Document.write (a + 3 * 3 + b);
Сейчас мы соединяем строку « а », затем результат выражения « 3 * 3 », рассматриваемый как строка, и « b », получая: « Hello world!9 I am a student. »
При использовании сложения нужно быть внимательным. Команда
Document.write (a + 3 + 3 + b);
соединяет 4 строки: « а », « 3 », « 3 » и « b », потому что «+» в данном случае означает «соединить строки», а не «сложить» и в результате: « Hello world!33 I am a student. ». Если Вы хотите сложить 3 и 3 перед созданием строки, используйте скобки.
Document.write (a + (3 + 3) + b);
Данное выражение соединяет строку « а », результат выражения « 3 + 3 » и « b », в итоге: « Hello world!6 I am a student. ».
indexOf
Один из самых широко используемых встроенных методов это «indexOf». Каждый символ имеет свой индекс, содержащий номер его позиции в строке. Заметим, что индекс первого символа — 0 , второго — 1 и т. д. Таким образом, индекс символа «w» в сроке « а » — 6 .
Используя «indexOf» мы можем вывести индекс символа. Напишите « .indexOf(" ") » после названия строки и вставьте искомый символ между кавычками. Например:
Var a = "Hello world!"; document.write(a.indexOf("w"));
возвратит 6 . Если символ встречается несколько раз, этот метод возвращает первое вхождение. То есть
Document.write(a.indexOf("o"));
возвратит 4 , потому что это индекс первой «o» в строке.
Вы также можете искать комбинацию символов. (Конечно, это тоже строка, но, чтобы избежать путаницы, я не буду называть её так). «indexOf» возвращает позицию первого символа комбинации. Например:
Document.write(a.indexOf("o w"));
тоже возвратит 4 , потому что это индекс «o».
Более того, возможен поиск символа после определенного индекса. Если Вы введете
Document.write(a.indexOf("o", 5));
то получите индекс первой «o», следующей за символом с индексом 5 (это пробел), то есть результат будет — 7 .
Если символ или комбинация не встречается в строке, «indexOf» возвратит « -1 ». Это, по сути, самое популярное применение «indexOf»: проверка существования определенной комбинации символов. Оно является ядром скрипта, определяющего браузер. Для определения IE Вы берете строку:
Navigator.userAgent;
и проверяете, содержит ли она « MSIE »:
If(navigator.userAgent.indexOf("MSIE") != -1) { //Какие-либо дествия с Internet Explorer }
Если индекс « MSIE » — не « -1 » (если « MSIE » встречается где-либо в строке), то текущий браузер — IE .
lastIndexOf
Также существует метод «lastIndexOf», который возвращает последнее вхождение символа или комбинации. Он действует противоположно «indexOf». Команда
Var b = "I am a student."; document.write(b.lastIndexOf("t"));
возвратит 13 , потому что это индекс последней «t» в строке.
charAt
Метод «charAt» возвращает символ, стоящий на указанной позиции. Например, когда Вы вводите
Var b = "I am a student."; document.write(b.charAt(5));
в результате получается « a », так как это символ на шестой позиции (помните, что индекс первого символа начинается с 0).
length
Метод «length» возвращает длину строки.
Var b = "I am a student."; document.write(b.length);
возвратит «15». Длина строки на 1 больше, чем индекс последнего символа.
split
« split » — это специальный метод, позволяющий разделить строку по определенным символам. Используется, когда результат необходимо заносить в массив, а не в простую переменную. Давайте разделим « b » по пробелам:
Var b = "I am a student." var temp = new Array(); temp = b.split(" ");
Теперь строка разбита на 4 подстроки, которые помещаются в массив « temp ». Сами пробелы исчезли.
Temp = "I"; temp = "am"; temp = "a"; temp = "student";
Метод «substring» используется для выделения части строки. Синтаксис метода: « .substring(первый_индекс, последний_индекс) ». Например:
Var a = "Hello world!"; document.write(a.substring(4, 8));
возвратит « o wo », от первой «o» (индекс 4) до второй (индекс 7). Заметьте, что «r» (индекс 8) не является частью подстроки.
Также можно написать:
Var a = "Hello world!"; document.write(a.substring(4));
Это даст целую подстроку « o world! », начиная от символа с индексом 4 и до конца строки.
substr
Также есть метод «substr», работающий немного по-другому. В качестве второго аргумента он использует не номер индекса, а количество символов. То есть
Document.write(a.substr(4, 8));
возвращает 8 символов, начиная от символа с индексом 4 («o»), то есть в результате получаем: « o world! »
toLowerCase и toUpperCase
Наконец, 2 метода, которые иногда могут Вам пригодиться: «toLowerCase» переводит всю строку в нижний регистр, а «toUpperCase» — в верхний.
Var b = "I am a student."; document.write(b.toUpperCase());
В результате получим « I AM A STUDENT. ».
Тип данных строка (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 функции работы со строками можно комбинировать в собственные смысловые конструкции, упрощая код и формализуя предметную область задачи.
В классическом варианте обработка информации - это, прежде всего, строковые функции. Каждая функция и конструкция языка имеет свои особенности в синтаксисе и семантике JavaScript. Методы работы со строками здесь имеют свой стиль, но в обычном применении это просто синтаксис в пределах простой семантики: поиск, замена, вставка, извлечение, контенкация, смена регистра...
Описание строковых переменных
Для объявления строки используется конструкция var. Можно сразу задать ее значение или формировать его в ходе исполнения алгоритма. Для строки можно использовать одинарные или двойные кавычки. Если в ней должна быть кавычка, её необходимо экранировать символом «\».
Строка, обозначенная требует экранирования внутренних двойных кавычек. Аналогично та, что обозначена одинарными, критична к наличию внутри одинарных кавычек.
В данном примере в строке «str_dbl» перечислены полезные специальные символы, которые можно использовать в строке. При этом сам символ «\» экранирован.
Строка - это всегда массив
Работа JavaScript со строками может выполняться множеством способов. Синтаксис языка предоставляет много вариантов. В первую очередь никогда не следует забывать, что (в контексте сделанных описаний):
- str_isV => «V»;
- str_chr => «"»;
- str_dbl => «a».
То есть символы строки доступны как элементы массива, при этом каждый специальный символ - это один символ. Экранирование - это элемент синтакиса. В реальную строку никакой «экран» не помещается.
Использование функции charAt() дает аналогичный эффект:
- str_isV.charAt(3) => «V»;
- str_chr.charAt(1) => «"»;
- str_dbl.charAt(5) => «a».
Программист может использовать любой вариант.
Основные строковые функции
В JavaScript выполнена несколько иначе, чем в других языках. К имени переменной (или непосредственно строки) через точку записывается имя функции. Обычно строчные функции именуют методами в стиле синтаксиса языка, но первое слово привычнее.
Самый важный метод строки (правильнее - свойство) - её длина.
- var xStr = str_isV.length + "/" + str_chr.length + "/" + str_dbl.length.
Результат: 11/12/175 по строкам приведенного выше описания.
Самая важная строчная пара функций - разделение строки на массив элементов и слияние массива в строку:
- split(s [, l]);
- join(s).
В первом случае строка разбивается по символу-разделителю «s» на массив элементов, в котором количество элементов не превышает значения «l». Если количество не задано, то разбивается вся строка.
Во втором случае массив элементов сливается в одну строку через заданный разделитель.
Примечательная особенность данной пары: разбиение можно производить по одному разделителю, а слияние - по другому. В этом контексте в JavaScript работа со строками может быть «выведена за пределы» синтаксиса языка.
Классические строчные функции
Обычные функции обработки строк:
- поиск;
- выборка;
- замена;
- преобразование.
Представлены методами: indexOf(), lastIndexOf(), toLowerCase(), toUpperCase(), concan(), charCodeAt() и другими.
В JavaScript работа со строками представлена большим множеством функций, но они либо дублируют друг друга, либо оставлены для старых алгоритмов и совместимости.
Например, использование метода concat() допустимо, но проще написать:
- str = str1 + str2 + str3;
Применение функции charAt() тоже имеет смысл, а вот применение charCodeAt() имеет реальное практическое значение. Аналогично, для JavaScript перенос строки имеет особенный смысл: в контексте вывода на экран, например, в сообщении alert() - это «\n», в конструкции формирования контента страницы это «
». В первом случае это просто символ, а во втором - строка символов.
Строки и регулярные выражения
В JavaScript работа со строками включает в себя механизм регулярных выражений. Это позволяет выполнять внутри браузера сложные поиски, выборки и преобразования строк без обращения к серверу.
Метод match находит, а replace заменяет найденное совпадение нужным значением. Регулярные выражения реализованы в JavaScript на высоком уровне, по сути своей, являются сложными, а ввиду специфики применения переносят центр тяжести с сервера в браузер клиента.
При применении методов match, search и replace следует не только уделить должное внимание тестированию на всём спектре допустимых значений исходных параметров и искомых строк, но и оценить нагрузку на браузер.
Примеры регулярных выражений
Область применения регулярных выражений для обработки строк обширна, но требует большой аккуратности и внимательности от разработчика. В первую очередь регулярки находят применение при тестировании ввода пользователя в полях форм.
Здесь представлены функции, которые проверяют, ввод содержит целое число (schInt) или число вещественное (schReal). Следующий пример показывает, насколько эффективно обрабатывать строки, проверяя их на наличие только допустимых символов: schText - только текст, schMail - правильный адрес электронной почты.
Очень важно иметь в виду, что в 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. Просто пропускайте такие видео, посмотрите потом.