→   Работа со строками в JavaScript

Во всех языках программирования есть такие операнды как строки. Представляют из себя простую группу символов и часто используются для передачи параметров или их хранения. К примеру значения свойств css класса могут храниться в строках или адрес сайта на который нужно будет сделать перенаправление тоже может храниться как строка.

Поэтому очень важно уметь работать со строками.

Оглавление

Возьмем какую-нибудь вымышленную строку, ну, например, какую-нибудь знаменитую фразу: «JavaScript now works!». И разберем на примере этой строки. Для начала основы работы со строками.

Объявление строки

Объявление строки выглядит вот так:

var  str = 'JavaScript now works!';

Сейчас была описана переменная «str» в которую мы записали определенную строку, заключив ее между одинарных кавычек. Если бы в строке уже присутствовали одинарные кавычки, которые являлись бы частью строки, то необходимо было бы использовать экранирование кавычек. То есть, ставить перед внутренней кавычкой обратный слеш «\».

var str = 'JavaScript \'now\' work!';

Кстати, вложенные двойные кавычки никак не будут конфликтовать и их не нужно экранировать.

var str = 'JavaScript "now" works!';

Обратная вложенность, одинарные в двойных, тоже совершенно нормально вместе сосуществуют.

Юникод

Объявим еще две строки «str1» и «str2» в которые запишем по два разных символа. Они тоже будут строками, потому что в джаваскрипте любые текстовые данные имеют тип строка (String), и нету никаких отдельных литер, как в других языках.

var str1 = 'а';
var str2 = 'б';
alert (str1 < str2); // вернет true

Вроде бы это логично, т.к. в кириллическом алфавите буква «а» стоит раньше буквы «б». Но вот если мы возьмем буквы «ё» и «я», то выражение:

alert ('ё' < 'я'); // вернет false

будет неправильным.

Это происходит из-за того, что джаваскрипту плевать какие алфавиты используют люди. У него есть свой «юникодный алфавит» в котором каждый символ соответствует определенному коду. И в выражениях выше, он сравнивает не буквы, а их представления в юникоде. При этом не имеет совершенно никакого значения в какой кодировке находится документ с которым вы работаете в windows-1251 или в utf-8 или может еще в какой-нибудь экзотической, не важно, все свои символы джаваскрипт переведет в свой юникод.

Получить юникод символа можно с помощью метода .charCodeAt(pos). Где «pos» это номер элемента в строке, начиная с нуля.

var str = 'JavaScript now works!';
var str.charCodeAt(4) // вернет «83»
var str.charCodeAt(0) // вернет «74»
var str.charCodeAt(11) // вернет «110»

Коды символов учитывают и регистр, то есть «а» - малая и «А» - большая будут иметь разные коды. В примере выше, выведенные юникоды будут такими: «83», «74», «111» и соответственно в строке «str» они будут равны 5-му, 1-му, и 12-му символам, то есть «S», «J» и «o».

Это не сложно проверить с помощью метода .fromCharCode, вот так:

String.fromCharCode(83,74,111) // вернет «SJo»

Если посчитать символы в строке, то как раз большая «S» будет пятым символом строки, а «J» большая первым и т.д.

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

С помощью оператора «+» строки можно складывать. Например, у нас есть две строки, «js» и «phrase» со следующими значениями:

var js     = 'JavaScript';
var phrase = 'now works!';
var str    = js+' '+phrase;

В результате в «str» мы получим нашу исходную строку, надо еще заметить, что в сложении, если присмотреться участвовал пробел, иначе бы у нас слова «JavaScript» и «now» склеились.

Для такой же операции существует также и метод – .concat().

var js     = 'JavaScript';
var phrase = 'now works!';
var str    = js.concat(' ').concat(phrase); 

Здесь также в конкатенации участвует пробел.

Длина строки

Так как, в джаваскрипте всё можно рассматривать в качестве объекта, то и строка не исключение. Поэтому с помощью встроенной функции .length можно узнать длину строки.

var str = 'JavaScript now works!';
str.length; //вернет 21, т.к. в строке 21 символов

Так можно вычислить длину любой строки, например, адрес этой страницы в интернете, можно представить, как строку и вывести её длину:

var url = document.location.href; //это «http://yeap.narod.ru/js/033.html»
str.length;//вернет 32
т.к. в строке «http://yeap.narod.ru/js/033.html» 32 символа

Конвертировать число в строку (Number → String)

Как было сказано выше, любой текст уже является строкой. В строки можно преобразовывать и числа, с помощью метода .toString(). Например, у нас есть какое-нибудь число — numb.

var numb = 12; // это число
numb.toString(); //а теперь это строка

Проверить, что произошло преобразование довольно легко. Допустим, у нас есть все тоже число numb и мы захотим произвести с ним какую-нибудь математическую операцию, ну, например сложение:

var numb = 12;
var result = numb + 3;
alert(result) // вернет 15
var result = numb.toString() + 3;
alert (result) // вернет 123

В примере выше, во второй строчке к числу numb с помощью оператора «+» мы добавили «3» и, совершенно, ожидаемо получили на следующей строке число «15». А вот далее к numb был применен метод .toString() и nubm был преобразован в строку. Далее джаваскрипт увидел, что к строке пытаются добавить число, а как было сказано выше в случае строками оператор «+» при работе со строками выполняет конкатенацию, то есть просто склеивает строки, в нашем случае мы логично получили строку «123».

Конвертировать строку в число (String → Number)

Некоторые строки можно наоборот преобразовывать в числа. Так как, в примере выше, видно, что оператор сложения плюс (+) при работе со строками склеивает их. А вот оператор умножения (*), остается верен математике и честно пытается умножать.

Все знают, что если умножить любое число на единицу, в результате получится тоже самое число.

var str = '12';// это строка
var result = str * 1; // умножаем на 1
alert(result) // а теперь это число 12

Тут джаваскрипт увидел, что строку '12' можно без проблем преобразовать в число, а затем умножить на единицу. И таким образом исходная строка превратится в число. А если в строке есть литеры в итоге JavaScript получит не число тип NaN (не число — Not a Number).

В этом случае можно воспользоваться встроенным методом .parseInt():

var str = '123абв';
var result = str.parseInt(); // вернет «123»

В примере выше видно, что JavaScipt отбросил все лишнее от строки взял только цифры и преобразовал их в число (Number).

Методы для работы со строками

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

имя_строки.имя_метода()

Преобразование регистра символов

С помощью методов .toUpperCase() и .toLowerCase() можно менять регистр символов строк.

var str = 'JavaScript now works!';
var result = str.toUpperCase(); // вернет «JAVASCRIPT NOW WORKS!»

var str = 'JavaScript now works!';
var result = str.toLowerCase(); // вернет «javascript now works!»

.indexOf()

Один из наиболее часто используемых методов для работы со строками – .indexOf(). Каждый символ в строке имеет свою позицию (свой индекс). И с помощью этого метода можно получить индекс символа:

var str = 'JavaScript now works!';
var result = str.indexOf('J'); // вернет «0»
var result = str.indexOf('S'); // вернет «4»

Тут как видно из первого примера отсчет индексов также начинается с нуля.

Если в строке содержится несколько одинаковых символов, то метод вернет позицию первого встретившегося с начала строки. Также можно задать сразу несколько символов: .indexOf('J S'). В этом случае метод вернет 0, т.к. первый символ «J» имеет индекс 0.

Метод можно использовать еще и таким образом:

var result = str.indexOf('a', 3); // вернет «3»

Вторым параметром здесь указано с какого индекса начать поиск символа 'a' вторая буква 'a' в строке str имеет как раз индекс 3.

Если символ указанный символ не встречается в строке то вернется значение -1 (значит false)

.lastIndexOf()

Он работает аналогично .indexOf() только выполняет поиск символа, начиная с конца строки.

var str = 'JavaScript now works!';
var result = str.lastIndexOf('o', 3); // вернет «16»

Последняя встречающаяся буква 'o' в строке str имеет индекс 16.

.charAt()

Метод .charAt() вернет символ, который будет соотвествовать указанной позиции.

var str = 'JavaScript now works!';
var result = str.charAt(0); // вернет «J»
var result = str.charAt(16); // вернет «o»
var result = str.charAt(2); // вернет «v»

Надо опять же помнить, что первый символ имеет индекс «0».

.substring()

Метод .substring() для получения подстроки. Он принимает два параметра в виде двух индексов – первого и последнего и возвращает все символы стоящие между этими индекса включая указанные.

var str = 'JavaScript now works!';
var result = str.substring(0, 3); // вернет «Java»

Также в методе можно указать один параметр и тогда он вернет строку начиная с указанного символа и до конца.

var result = str.substring(4); // вернет «Script now works!»

.substr()

Метод .substr() работает несколько иначе. В качестве второго параметра он принимает не индекс позиции символа, а количество символов.

var result = str.substring(4, 6); // вернет «Script»
var result = str.substring(0, 4); // вернет «Java»

.split()

Метод .split() служит для разбития строки на части через указанный символ. Возьмем все ту же строку str и попробуем ее разделить на три части через пробел между словами. Пробел ведь тоже символ.

var str = 'JavaScript now works!';
var result = str.split(' '); 

Переменная result теперь станет масивом с тремя элементами: «JavaScript», «now» и «works!».

Пробел исчез, а выводить часть строки можно теперь так:

result[0]; // вернет «JavaScript»
result[1]; // вернет «now»
result[2]; // вернет «works!»