Строки

В JavaScript любые текстовые данные являются строками. Даже один символ - строка.

Все строки, вне зависимости от кодировки, хранятся в формате Юникод (Unicode).

Создание строк

Строки создаются при помощи двойных или одинарных кавычек:

var text = "моя строка";

var anotherText = 'еще строка';

var str = "012345";

В JavaScript нет разницы между двойными и одинарными кавычками.

Специальные символы

Строки могут содержать специальные символы. Самый часто используемый из таких символов - это перевод строки.

Он обозначается как \n, например:

alert('Привет\nМир'); // выведет "Мир" на новой строке

Есть и более редкие символы, вот их список:

Экранирование специальных символов

Если строка в одинарных кавычках, то внутренние одинарные кавычки внутри должны быть экранированы, то есть снабжены обратным слешем \', вот так:

var str = '*!*I\'m*/!* a JavaScript programmer';

В двойных кавычках — экранируются внутренние двойные:

var str = "I'm a JavaScript \"programmer\" ";
alert(str);

Экранирование служит исключительно для правильного восприятия строки JavaScript. В памяти строка будет содержать сам символ без '\'. Вы можете увидеть это, запустив пример выше.

Сам символ обратного слэша '\' является служебным, поэтому всегда экранируется, т.е пишется как \\:

var str = ' символ \\ ';

alert(str); // символ \

Заэкранировать можно любой символ. Если он не специальный, то ничего не произойдёт:

alert( "\a" ); // a
// идентично alert( "a" );

Методы и свойства

Здесь мы рассмотрим методы и свойства строк, с некоторыми из которых мы знакомились ранее, в главе Методы и свойства.

Длина length

Одно из самых частых действий со строкой — это получение ее длины:

var str = "My\n"; // 3 символа. Третий - перевод строки

alert(str.length);  // 3

Доступ к символам

Чтобы получить символ, используйте вызов charAt(позиция). Первый символ имеет позицию 0:

var str = "jQuery";
alert( str.charAt(0) );  // "j"

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

var str = "Я - современный браузер!";
alert(str[0]);  // "Я", IE8+

alert( "".charAt(0) ); // пустая строка
alert( ""[0] ); // undefined, IE8+

Изменения строк

Строки в JavaScript нельзя изменять. Можно прочитать символ, но нельзя заменить его. Как только строка создана — она такая навсегда.

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

var str = "строка";

str =  str.charAt(3) + str.charAt(4) + str.charAt(5);

alert(str); // ока

Смена регистра

Методы toLowerCase() и toUpperCase() меняют регистр строки на нижний/верхний:

alert( "Интерфейс".toUpperCase() ); // ИНТЕРФЕЙС

Пример ниже получает первый символ и приводит его к нижнему регистру:

alert( "Интерфейс".charAt(0).toLowerCase() ); // 'и'

ucFirst("вася") == "Вася"

function ucFirst(str) {
  var newStr = str.charAt(0).toUpperCase();

  for(var i=1; i<str.length; i++) {
    newStr += str.charAt(i);
  }

  return newStr;
}

alert( ucFirst("вася") );

Поиск подстроки

Для поиска подстроки есть метод indexOf(подстрока[, начальная_позиция]).

Он возвращает позицию, на которой находится подстрока или -1, если ничего не найдено. Например:

var str = "Widget with id";

alert( str.indexOf("Widget") ); // 0, т.к. "Widget" найден прямо в начале str
alert( str.indexOf("id") ); // 1, т.к. "id" найден, начиная с позиции 1
alert( str.indexOf("Lalala") ); // -1, подстрока не найдена

Необязательный второй аргумент позволяет искать, начиная с указанной позиции. Например, первый раз "id" появляется на позиции 1. Чтобы найти его следующее появление - запустим поиск с позиции 2:

var str = "Widget with id";

alert( str.indexOf("id", 2) ) // 12, поиск начат с позиции 2

Также существует аналогичный метод lastIndexOf, который ищет не с начала, а с конца строки.

alert( ~2 ); // -(2+1) = -3
alert( ~1 ); // -(1+1) = -2
alert( ~0 ); // -(0+1) = -1
*!*
alert( ~-1 ); // -(-1+1) = 0
*/!*

var str = "Widget";

if( ~str.indexOf("get") ) {
  alert('совпадение есть!');
}

checkSpam('buy ViAgRA now') == true
checkSpam('free xxxxx') == true
checkSpam("innocent rabbit") == false

function checkSpam(str) {
  str = str.toLowerCase();
       
  return str.indexOf('viagra') >= 0 || str.indexOf('xxx') >= 0;
}

Взятие подстроки: substr, substring, slice.

В JavaScript существуют целых 3 (!) метода для взятия подстроки, с небольшими отличиями между ними.

substring(start [, end])

Метод substring(start, end) возвращает подстроку с позиции start до, но не включая end.

var str = "*!*s*/!*tringify";
alert(str.substring(0,1)); // "s", символы с позиции 0 по 1 не включая 1.

Если аргумент end отсутствует, то идет до конца строки:

var str = "st*!*ringify*/!*";
alert(str.substring(2)); // ringify, символы с позиции 2 до конца

substr(start [, length])

Первый аргумент имеет такой же смысл, как и в substring, а второй содержит не конечную позицию, а количество символов.

var str = "st*!*ring*/!*ify";
str = str.substr(2,4); // ring, со 2й позиции 4 символа 
alert(str)

Если второго аргумента нет - подразумевается «до конца строки».

slice(start [, end])

Возвращает часть строки от позиции start до, но не включая, позиции end. Смысл параметров - такой же как в substring.

Различие между substring и slice - в том, как они работают с отрицательными и выходящими за границу строки параметрами:

substring(start, end)

Отрицательные аргументы интерпретируются как равные нулю. Слишком большие значения усекаются до длины строки:

alert( "testme".substring(-2) );  // "testme", -2 становится 0

Кроме того, если start > end, то аргументы меняются местами, т.е. возвращается участок строки между start и end:

alert( "testme".substring(4, -1) );  // "test"
// -1 становится 0 -> получили substring(4, 0) 
// 4 > 0, так что аргументы меняются местами -> substring(0, 4) = "test"

slice

Отрицательные значения отсчитываются от конца строки:

alert( "testme".slice(-2) );  // "me", от 2 позиции с конца

alert( "testme".slice(1, -1) ); // "estm", от 1 позиции до первой с конца.

Это гораздо более удобно, чем странная логика substring.

Отрицательное значение start также поддерживается в substr во всех браузерах, кроме IE.

truncate("Вот, что мне хотелось бы сказать на эту тему:", 20)) = "Вот, что мне хотело…"

truncate("Всем привет!", 20)) = "Всем привет!"

function truncate(str, maxlength) {
  if (str.length > maxlength) {
    return str.slice(0, maxlength - 3) + '...';
    // итоговая длина равна maxlength
  }

  return str;
}

alert(truncate("Вот, что мне хотелось бы сказать на эту тему:", 20))
alert(truncate("Всем привет!", 20))

function truncate(str, maxlength) {
  if (str.length > maxlength) {
    return str.slice(0, maxlength - 1) + '…';
  }

  return str;
}

alert(truncate("Вот, что мне хотелось бы сказать на эту тему:", 20))
alert(truncate("Всем привет!", 20))

function truncate(str, maxlength) {
  return (str.length > maxlength) ? 
    str.slice(0, maxlength - 1) + '…' : str;
}

alert(truncate("Вот, что мне хотелось бы сказать на эту тему:", 20))
alert(truncate("Всем привет!", 20))

Кодировка Юникод

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

Как мы знаем, символы сравниваются в алфавитном порядке 'А' < 'Б' < 'В' < ... < 'Я'.

Но есть несколько странностей..

1. Почему буква 'а' маленькая больше буквы 'Я' большой?
   

   alert( 'а' > 'Я' ); // true
   

2. Буква 'ё' находится в алфавите между е и ж: абвгдеёжз... Но почему тогда 'ё' больше 'я'?
   

   alert( 'ё' > 'я' ); // true
   

Чтобы разобраться с этим, обратимся к внутреннему представлению строк в JavaScript.

Все строки имеют внутреннюю кодировку Юникод.

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

Есть метод для получения символа по его цифровому коду:

String.fromCharCode(code)

Возвращает символ по коду code:

alert( String.fromCharCode(1072) ); // 'а'

… И метод для получения цифрового кода:

str.charCodeAt(pos)

Возвращает код символа на позиции pos. Отсчет позиции начинается с нуля.

alert( "абрикос".charCodeAt(0) ); // 1072, код 'а'

Теперь вернемся к примерам выше. Почему сравнения 'ё' > 'я' и 'а' > 'Я' дают такой странный результат?

Дело в том, что символы сравниваются не по алфавиту, а по коду. У кого код больше — тот и больше. В юникоде есть много разных символов. Славянским языкам соответствуют коды примерно от 1024 до 1119.

Так их можно получить:

var s = '';
for (var i=1024; i<=1119; i++) {
  s += String.fromCharCode(i);
}

Промежуток взят «с запасом», так что можно увидеть некириллические символы в начале и в конце.

Мы можем увидеть из этого отрезка кодировки две вещи:

1. Строчные буквы идут после заглавных, поэтому они всегда больше.
   В частности, 'а'(код 1072) > 'Я'(код 1071).
   Кстати, то же самое и в английском алфавите, там 'a' > 'Z'.
2. Ряд букв, например ё, находятся вне основного алфавита.
   Это объясняет, почему 'ё'(код 1105) > 'я'(код 1103).

Сравнение строк

Строки сравниваются лексикографически, в порядке «телефонного справочника».

Сравнение строк s1 и s2 обрабатывается по следующему алгоритму:

1. Сравниваются первые символы: a = s1.charAt(0) и b = s2.charAt(0). Если они одинаковы, то следующий шаг, иначе, в зависимости от результата их сравнения, возвратить true или false
2. Сравниваются вторые символы, затем третьи и так далее… Если в одной строке закончились символы, то она меньше. Если в обоих закончились - они равны.

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

"Z" > "A" // true
"Вася" > "Ваня" // true, т.к. с > н
"aa" > "a"  // true, т.к. начало совпадает, но в 1й строке больше символов

alert("2" > "14"); // true, т.к. это строки и "2" > "1"

alert(2 > "14"); // false

Итого

• Строки в JavaScript имеют внутреннюю кодировку Юникод. При написании строки можно использовать спец. символы и вставлять юникодные символы по коду.
• Мы познакомились со свойством length и методами charAt, toLowerCase/toUpperCase, substring/substr/slice (предпочтителен slice)
• Строки сравниваются побуквенно. Поэтому если число получено в виде строки, то такие числа могут сравниваться некорректно, нужно преобразовать его к типу number.

Больше информации о методах для строк можно получить в справочнике: http://javascript.ru/String.