Тип данных String. Его особенности, свойства, методы. Строковые шаблоны.
В JavaScript любые текстовые данные являются строками. Не существует отдельного типа «символ», который есть в ряде других языков. Внутренним форматом строк, вне зависимости от кодировки страницы, является 16-разрядный Юникод (Unicode).
Создание строк
Строки создаются при помощи двойных или одинарных кавычек:
let text = "моя строка";
let anotherText = 'еще строка';
Специальные символы
Строки могут содержать специальные символы. Самый часто используемый из таких символов – это «перевод строки».
Есть и более редкие символы, вот их список:
| Специальные символы | |
| Символ | Описание |
| \b | Backspace |
| \f | Form feed |
| \n | New line |
| \r | Carriage return |
| \t | Tab |
| \uNNNN | Символ в кодировке Юникод с шестнадцатеричным кодом `NNNN`. Например, `\u00A9` - юникодное представление символа копирайт © |
Экранирование специальных символов
Экранирование служит исключительно для правильного восприятия строки JavaScript. В памяти строка будет содержать сам символ без '\'.
\0 — ноль-символ
\' — одинарная кавычка
\" — двойная кавычка
\\ — обратный слэш
\b — забой
\f — разрыв страницы
\n — новая строка
\r — возврат каретки
\t — табуляция
\v — вертикальная табуляция
\uFFFF (4 шестнадцатеричных цифры) — символ по Unicode-коду
\u{F} … \u{FFFFFF} — расширенный юникод
\xFF — символ по коду ASCII Latin-1
Многострочность
Строка однострочная. Для многострочной можно в конце поставить «`\`» (перевод строки игнорируется):
'Пример текста\
занимающего две строки'
=== 'Пример текста занимающего две строки' // true
Или использовать шаблоны (перевод строки учитывается):
`Пример текста
занимающего две строки`
=== 'Пример текста\nзанимающего две строки' // true
Операции
Объединение строк — оператор «+»:
'Hello' + ' world' // 'Hello world'
Сравнение происходит побуквенно по алфавиту (таблице символов):
'abc' === 'abc'
'abc' === 'a' + 'b' + 'c'
'a' < 'b' // true
'c' < 'b' // false
'abcd' < 'abcd' // false
'abcd' < 'abdc' // true
Методы и свойства
Свойство length
Одно из самых частых действий со строкой – это получение ее длины:
‘text’.length; // 4
Доступ к символам
charAt( index: number ): string
— получить символ в заданной позиции (от нуля). Если запрошенная позиция выходит за пределы строки, вернётся пустая строка.
'text'.charAt( 1 ); // 'e'
'text'.charAt( -1 ); // ''
'text'.charAt( 10 ); // ''
'text'.charAt( 0 ); // 't'
Также для доступа к символу можно использовать квадратные скобки:
‘text’ [0]; // "t"
Разница между этим способом и charAt заключается в том, что если символа нет – charAt выдает пустую строку, а скобки – undefined:
"".charAt(0); // пустая строка
"" [0]; // undefined
Изменения строк
Содержимое строки в JavaScript нельзя изменять. Нельзя взять символ посередине и заменить его. Как только строка создана – она такая навсегда.
Можно лишь создать целиком новую строку и присвоить в переменную вместо старой, например:
let str = "строка";
str = str[3] + str[4] + str[5];
alert( str ); // ока
Смена регистра
Методы toLowerCase() и toUpperCase() меняют регистр строки на нижний/верхний:
"Интерфейс".toUpperCase(); // ИНТЕРФЕЙС
Пример ниже получает первый символ и приводит его к нижнему регистру:
"Интерфейс" [0].toLowerCase(); // 'и'
Поиск подстроки
indexOf( searchString: string, fromIndex?: number )
- возвращает позицию, на которой находится подстрока или -1, если ничего не найдено. Например:
'test text'.indexOf( 't' ) // 0
'test text'.indexOf( 't', 1 ) // 3
'test text'.indexOf( 'te', 1 ) // 5
'test text'.indexOf( 'z' ) // -1
lastIndexOf( searchString: string, toIndex?: number )
— находит последнее вхождение подстроки `searchString` в строке до позиции `toIndex` (0..длина), если указана, иначе — до конца строки. Возвращается позиция первого символа (от нуля), или «-1», если вхождения нет.
'test text'.lastIndexOf( 't' ) // 8
'test text'.lastIndexOf( 't', 7 ) // 5
'test text'.lastIndexOf( 'te' ) // 5
'test text'.lastIndexOf( 'z' ) // -1
includes( searchString: string, position?: number ): Boolean
— проверяет вхождение подстроки `searchString` в строке, начиная от позиции `position` (0..длина), если указана, иначе — с начала строки. Возвращает `true`, если подстрока найдена, иначе — `false`.
'test text'.includes( 't' ) // true
'test text'.includes( 'st' ) // true
'test text'.includes( 'st', 3 ) // false
'test text'.includes( 'z' ) // false
endsWith( searchString: string, endPosition?: number ): Boolean
— проверяет, что строка завершается подстрокой `searchString`. Если указано `endPosition`, то строка считается данной длины, иначе поиск идёт до конца строки.
'test text'.endsWith( 't' ) // true
'test text'.endsWith( 'x' ) // false
'test text'.endsWith( 'st', 4 ) // true
'test text'.endsWith( 'st', 5 ) // false
Взятие подстроки: substr, substring, slice
В JavaScript существуют целых 3 метода для взятия подстроки, с небольшими отличиями между ними.
substring(start [, end])
- возвращает подстроку с позиции start до, но не включая end. Если аргумент end отсутствует, то идет до конца строки.
‘stringify’.substring(0,1)); // "s"
‘stringify’.substring(2)); // "ringify"
substr(start [, length])
- первый аргумент имеет такой же смысл, как и в substring, а второй содержит не конечную позицию, а количество символов. Если второго аргумента нет – подразумевается «до конца строки».
‘stringify’.substr(2,4); // ring
slice(start [, end])
- возвращает часть строки от позиции start до, но не включая, позиции end.
Отрицательные аргументы
Различие между substring и slice – в том, как они работают с отрицательными и выходящими за границу строки аргументами:
substring(start, end)
Отрицательные аргументы интерпретируются как равные нулю. Слишком большие значения усекаются до длины строки:
"testme".substring(-2); // "testme", -2 становится 0
Кроме того, если start > end, то аргументы меняются местами, т.е. возвращается участок строки междуstart и end:
"testme".substring(4, -1); // "test"
// -1 становится 0 -> получили substring(4, 0)
// 4 > 0, так что аргументы меняются местами -> substring(0, 4) = "test"
slice(start [, end])
Отрицательные значения отсчитываются от конца строки:
"testme".slice(-2); // "me", от 2 позиции с конца
"testme".slice(1, -1); // "estm", от 1 позиции до первой с конца.
Кодировка Юникод
charCodeAt( index: number ): number
— возвращает числовой Unicode-код символа (0…65535). При выходе за диапазон возвращает NaN.
'text'.charCodeAt( 1 ) // 101
'text'.charCodeAt( 10 ) // NaN
codePointAt( position: number ): number | undefined
— возвращает числовой Unicode-код символа с подержкой суррогатных пар (два 16-битных значения, где каждое значение лежит в диапазоне от 0xD800 и до 0xDFFF; другими словами, два «типа символа» образуют один «настоящий» символ). Если в указанной позиции нет символа, возвращается `undefined`.
'text'.codePointAt( 1 ) // 101
'text'.codePointAt( 10 ) // undefined
'\uD800\uDC00'.codePointAt( 0 ) // 65536
Другие методы
concat( ...strings: string[] ): string
— объединение двух или более строк. Объединение через оператор «+» является предпочтительнее.
't'.concat( 'e', 'x', 't' ) // 'text'
localeCompare( compareString: string ): number
— сравнивает две строки. Если compareString больше — результат отрицательный, меньше — положительный, равны — нулевой.
'a'.localeCompare( 'b' ) // -1
'a'.localeCompare( 'c' ) // -1
'ё'.localeCompare( 'я' ) // -1
trim(): string
— удаляет интервальные символы по сторонам строки (пробелы, табуляцию, переводы строк).
' test \t\n '.trim() === 'test'
search( regexp: string | RegExp ): number
— находит первое совпадение регулярного выражения со строкой. Глобальный поиск не осуществляет (флаг «g» не учитывается).
'test text'.search( /.t/ ) // 2
'test text'.search( '.t' ) // 2
'test text'.search( /^.t/ ) // -1
match( regexp: string | RegExp ): RegExpMatchArray | null
— возвращает перечень совпадений регулярного выражения по строке.
'test text'.match( /.t/g ) // [ 'st', ' t', 'xt' ]
replace( searchValue: string | RegExp, replaceValue: string | Function )
— производит поиск с заменой по строке. В результате возвращает новую строку. Шаблон для совпадения может быть регулярным выражением или строкой. Результат, на который заменять, может быть строкой или функцией. В последнем случае замена производятся на результат работы функции.
Строка замены понимает следующие мета-последовательности:
* `$$` — символ «$»
* `$&` — совпавшая подстрока
* `$`` — часть строки до совпадения
* `$'` — часть строки после совпадения
* `$1`, `$2`, … — результат совпадения соответствующего подшаблона регулярного выражения
Функция замены принимает следующие аргументы:
* math — совпавшая подстрока
* p1, p2, … — результат совпадения соответствующего подшаблона регулярного выражения
* offset — позиция подстроки в строке
* string — исходная строка
'test text'.replace( 'te', 'be' ) // 'best text'
'test text'.replace( /te/, 'be' ) // 'best text'
'test text'.replace( /te/g, 'be' ) // 'best bext'
'test text'.replace( ' ', '[$`]<$&>($\')' ) // 'test[test]< >(text)text'
split( [separator][, limit] )
— разделяет строку на массив подстрок.
separator — разделитель строки, может быть строкой или регулярным выражением.
limit — устанавливает ограницение на количество разделяемых частей.
'test text'.split() // [ 'test text' ]
'test text'.split( '' ) // ['t', 'e', 's', 't', ' ', 't', 'e', 'x', 't']
'test text'.split( ' ' ) // [ 'test', 'text' ]
'test text'.split( 't' ) // [ '', 'es', ' ', 'ex', '' ]
'test text'.split( 't', 3 ) // [ '', 'es', ' ' ]
String.fromCharCode( num1, ..., numN )
— строка из кодов символов.
String.fromCharCode( 65, 66, 67 ) // ABC
Строковые шаблоны
Добавлен новый вид кавычек для строк:
let str = `обратные кавычки`;
Основные отличия:
ü Поддерживают многострочность
`моя
многострочная
строка`;
ü Можно вставлять выражения при помощи${…}
`2 + 3 = ${2 + 3}`; // 2 + 3 = 5
При помощи ${…} можно вставлять как значение переменной, так и более сложные выражения, которые могут включать в себя операторы, вызовы функций и т.п. Такую вставку называют «интерполяцией».
ü Поддерживают тег-функцию
Название этой функции ставится перед первой обратной кавычкой:
let str = func`моя строка`;
Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров ${…} и сами эти параметры.
function myTag( strings, ...values )
{
console.log( strings );
console.log( strings.raw );
console.log( values );
return `[${strings.join( '][' )}]`;
}
myTag`Test \u263A ${1} template ${2} literal ${3} string`
В strings.raw содержатся участки строки в «изначально введённом» виде. То есть, если в строке находится \n или \u1234 или другое особое сочетание символов, то оно таким и останется.