→ Работа со строками в JavaScript
Во всех языках программирования есть такие операнды как строки. Представляют из себя простую группу символов и часто используются для передачи параметров или их хранения. К примеру значения свойств css класса могут храниться в строках или адрес сайта на который нужно будет сделать перенаправление тоже может храниться как строка.
Поэтому очень важно уметь работать со строками.
Оглавление
Возьмем какую-нибудь вымышленную строку, ну, например, какую-нибудь знаменитую фразу: «JavaScript now works!». И разберем на примере этой строки. Для начала основы работы со строками.
Объявление строкиОбъявление строки выглядит вот так:
Сейчас была описана переменная « str » в которую мы записали определенную строку, заключив ее между одинарных кавычек. Если бы в строке уже присутствовали одинарные кавычки, которые являлись бы частью строки, то необходимо было бы использовать экранирование кавычек. То есть, ставить перед внутренней кавычкой обратный слеш «\».
Кстати, вложенные двойные кавычки никак не будут конфликтовать и их не нужно экранировать.
Обратная вложенность, одинарные в двойных, тоже совершенно нормально вместе сосуществуют.
ЮникодОбъявим еще две строки «str1» и «str2» в которые запишем по два разных символа. Они тоже будут строками, потому что в джаваскрипте любые текстовые данные имеют тип строка (String), и нету никаких отдельных литер, как в других языках.
Вроде бы это логично, т.к. в кириллическом алфавите буква «а» стоит раньше буквы «б». Но вот если мы возьмем буквы «ё» и «я», то выражение:
Это происходит из-за того, что джаваскрипту плевать какие алфавиты используют люди. У него есть свой «юникодный алфавит» в котором каждый символ соответствует определенному коду. И в выражениях выше, он сравнивает не буквы, а их представления в юникоде. При этом не имеет совершенно никакого значения в какой кодировке находится документ с которым вы работаете в windows-1251 или в utf-8 или может еще в какой-нибудь экзотической, не важно, все свои символы джаваскрипт переведет в свой юникод.
Получить юникод символа можно с помощью метода .charCodeAt(pos). Где «pos» это номер элемента в строке, начиная с нуля.
Коды символов учитывают и регистр, то есть «а» - малая и «А» - большая будут иметь разные коды. В примере выше, выведенные юникоды будут такими: «83», «74», «111» и соответственно в строке « str » они будут равны 5-му, 1-му, и 12-му символам, то есть «S», «J» и «o».
Это не сложно проверить с помощью метода .fromCharCode , вот так:
Если посчитать символы в строке, то как раз большая «S» будет пятым символом строки, а «J» большая первым и т.д.
Конкатенация строкС помощью оператора «+» строки можно складывать. Например, у нас есть две строки, « js » и « phrase » со следующими значениями:
В результате в « str » мы получим нашу исходную строку, надо еще заметить, что в сложении, если присмотреться участвовал пробел, иначе бы у нас слова «JavaScript» и «now» склеились.
Для такой же операции существует также и метод – .concat() .
Здесь также в конкатенации участвует пробел.
Длина строкиТак как, в джаваскрипте всё можно рассматривать в качестве объекта, то и строка не исключение. Поэтому с помощью встроенной функции .length можно узнать длину строки.
Так можно вычислить длину любой строки, например, адрес этой страницы в интернете, можно представить, как строку и вывести её длину:
Конвертировать число в строку (Number → String)Как было сказано выше, любой текст уже является строкой. В строки можно преобразовывать и числа, с помощью метода .toString() . Например, у нас есть какое-нибудь число — numb.
Проверить, что произошло преобразование довольно легко. Допустим, у нас есть все тоже число numb и мы захотим произвести с ним какую-нибудь математическую операцию, ну, например сложение:
В примере выше, во второй строчке к числу numb с помощью оператора «+» мы добавили «3» и, совершенно, ожидаемо получили на следующей строке число «15». А вот далее к numb был применен метод .toString() и nubm был преобразован в строку. Далее джаваскрипт увидел, что к строке пытаются добавить число, а как было сказано выше в случае строками оператор «+» при работе со строками выполняет конкатенацию, то есть просто склеивает строки, в нашем случае мы логично получили строку «123».
Конвертировать строку в число (String → Number)Некоторые строки можно наоборот преобразовывать в числа. Так как, в примере выше, видно, что оператор сложения плюс (+) при работе со строками склеивает их. А вот оператор умножения (*), остается верен математике и честно пытается умножать.
Все знают, что если умножить любое число на единицу, в результате получится тоже самое число.
Тут джаваскрипт увидел, что строку '12' можно без проблем преобразовать в число, а затем умножить на единицу. И таким образом исходная строка превратится в число. А если в строке есть литеры в итоге JavaScript получит не число тип NaN (не число — Not a Number).
В этом случае можно воспользоваться встроенным методом .parseInt():
В примере выше видно, что JavaScipt отбросил все лишнее от строки взял только цифры и преобразовал их в число (Number).
Методы для работы со строкамиНа примере длины строки или других методов, которые были описаны выше, можно заметить, что методы со строкой работают по такому шаблону:
Преобразование регистра символовС помощью методов .toUpperCase() и .toLowerCase() можно менять регистр символов строк.
.indexOf()Один из наиболее часто используемых методов для работы со строками – .indexOf(). Каждый символ в строке имеет свою позицию (свой индекс). И с помощью этого метода можно получить индекс символа:
Тут как видно из первого примера отсчет индексов также начинается с нуля.
Если в строке содержится несколько одинаковых символов, то метод вернет позицию первого встретившегося с начала строки. Также можно задать сразу несколько символов: .indexOf('J S'). В этом случае метод вернет 0, т.к. первый символ «J» имеет индекс 0.
Метод можно использовать еще и таким образом:
Вторым параметром здесь указано с какого индекса начать поиск символа 'a' вторая буква 'a' в строке str имеет как раз индекс 3.
Если символ указанный символ не встречается в строке то вернется значение -1 (значит false)
.lastIndexOf()Он работает аналогично .indexOf() только выполняет поиск символа, начиная с конца строки.
Последняя встречающаяся буква 'o' в строке str имеет индекс 16.
.charAt()Метод .charAt() вернет символ, который будет соотвествовать указанной позиции.
Надо опять же помнить, что первый символ имеет индекс «0».
.substring()Метод .substring() для получения подстроки. Он принимает два параметра в виде двух индексов – первого и последнего и возвращает все символы стоящие между этими индекса включая указанные.
Также в методе можно указать один параметр и тогда он вернет строку начиная с указанного символа и до конца.
.substr()Метод .substr() работает несколько иначе. В качестве второго параметра он принимает не индекс позиции символа, а количество символов.
.split()Метод .split() служит для разбития строки на части через указанный символ. Возьмем все ту же строку str и попробуем ее разделить на три части через пробел между словами. Пробел ведь тоже символ.
Переменная result теперь станет масивом с тремя элементами: «JavaScript», «now» и «works!».