Строки в javascript
Содержание:
Replacing String Content
The method replaces a specified value with another
value in a string:
Example
let text = «Please visit Microsoft!»;
let newText = text.replace(«Microsoft», «W3Schools»);
The method does not change the string it is called on. It returns a new string.
By default, the method replaces only the first match:
Example
let text = «Please visit Microsoft and Microsoft!»;
let newText = text.replace(«Microsoft», «W3Schools»);
By default, the method is case sensitive. Writing MICROSOFT (with
upper-case) will not work:
Example
let text = «Please visit Microsoft!»;
let newText = text.replace(«MICROSOFT», «W3Schools»);
To replace case insensitive, use a regular expression with an flag (insensitive):
Example
let text = «Please visit Microsoft!»;
let newText = text.replace(/MICROSOFT/i, «W3Schools»);
Note that regular expressions are written without quotes.
To replace all matches, use a regular expression with a flag (global match):
Example
let text = «Please visit Microsoft and Microsoft!»;
let newText = text.replace(/Microsoft/g, «W3Schools»);
You will learn a lot more about regular expressions in the chapter JavaScript Regular
Expressions.
Управляющие последовательности
В строковых литералах можно использовать управляющие последовательности. Управляющая последовательность – это последовательность, состоящая из обычных символов, которая обозначает символ, не представимый внутри строки другими способами. Управляющие последовательности предназначены для форматирования вывода текстового содержимого.
В таблице ниже представлены управляющие последовательности:
| Последовательность | Значение |
|---|---|
| Символ NUL – пустой символ (). | |
| Горизонтальная табуляция (). | |
| Перевод на новую строку (). | |
| Возврат на одну позицию – то, что происходит при нажатии на клавишу backspace (). | |
| Возврат каретки (). | |
| Перевод страницы – очистка страницы (). | |
| Вертикальная табуляция (). | |
| Двойная кавычка (). | |
| Одинарная кавычка (). | |
| Обратный слэш (). | |
| Номер символа из набора символов ISO Latin-1, заданный двумя шестнадцатеричными цифрами ( – шестнадцатеричная цифра ). Например, (это код буквы ). | |
| Номер символа из набора символов Unicode, заданный четырьмя шестнадцатеричными цифрами ( – шестнадцатеричная цифра ). Например, (это код буквы ). |
Управляющие последовательности могут находиться в любом месте строки:
alert("Греческая буква сигма: \u03a3."); // Греческая буква сигма: Σ.
alert("Многострочная\nстрока") // Многострочная
// строка
alert("внутри используются \"двойные\" кавычки"); // внутри используются "двойные" кавычки
Если символ предшествует любому символу, отличному от приведённых в таблице, то он просто игнорируется интерпретатором:
alert("\k"); // "k"
Символы Unicode, указываемые с помощью управляющей последовательности, можно использовать не только внутри строковых литералов, но и в идентификаторах:
let a\u03a3 = 5; alert(a\u03a3); // 5
Строковые методы, поиск и замена
Следующие методы работают с регулярными выражениями из строк.
Все методы, кроме replace, можно вызывать как с объектами типа regexp в аргументах, так и со строками, которые автоматом преобразуются в объекты RegExp.
Так что вызовы эквивалентны:
var i = str.search(/\s/)
var i = str.search("\\s")
При использовании кавычек нужно дублировать \ и нет возможности указать флаги. Если регулярное выражение уже задано строкой, то бывает удобна и полная форма
var regText = "\\s" var i = str.search(new RegExp(regText, "g"))
Возвращает индекс регулярного выражения в строке, или -1.
Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод (аналогично RegExp-методы ). Чтобы получить больше информации, используйте более медленный метод (аналогичный методу ).
Этот пример выводит сообщение, в зависимости от того, подходит ли строка под регулярное выражение.
function testinput(re, str){
if (str.search(re) != -1)
midstring = " contains ";
else
midstring = " does not contain ";
document.write (str + midstring + re.source);
}
Если в regexp нет флага , то возвращает тот же результат, что .
Если в regexp есть флаг , то возвращает массив со всеми совпадениями.
Чтобы просто узнать, подходит ли строка под регулярное выражение , используйте .
Если Вы хотите получить первый результат — попробуйте r.
В следующем примере используется, чтобы найти «Chapter», за которой следует 1 или более цифр, а затем цифры, разделенные точкой. В регулярном выражении есть флаг , так что регистр будет игнорироваться.
str = "For more information, see Chapter 3.4.5.1"; re = /chapter (\d+(\.\d)*)/i; found = str.match(re); alert(found);
Скрипт выдаст массив из совпадений:
- Chapter 3.4.5.1 — полностью совпавшая строка
- 3.4.5.1 — первая скобка
- .1 — внутренняя скобка
Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с . Будут найдены все буквы от А до Е и от а до е, каждая — в отдельном элементе массива.
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var regexp = //gi; var matches = str.match(regexp); document.write(matches); // matches =
Метод replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис — такой:
var newString = str.replace(regexp/substr, newSubStr/function)
- Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2
- Строка, которая будет заменена на .
- Строка, которая заменяет подстроку из аргумента номер 1.
- Функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).
Метод не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.
Чтобы осуществить глобальную замену, включите в регулярное выражение флаг .
Если первый аргумент — строка, то она не преобразуется в регулярное выражение, так что, например,
var ab = "a b".replace("\\s","..") // = "a b"
Вызов replace оставил строку без изменения, т.к искал не регулярное выражение , а строку «\s».
В строке замены могут быть такие спецсимволы:
| Pattern | Inserts |
| Вставляет «$». | |
| Вставляет найденную подстроку. | |
| Вставляет часть строки, которая предшествует найденному вхождению. | |
| Вставляет часть строки, которая идет после найденного вхождения. | |
| or | Где или — десятичные цифры, вставляет подстроку вхождения, запомненную -й вложенной скобкой, если первый аргумент — объект RegExp. |
Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.
В функции можно динамически генерировать и возвращать строку подстановки.
Первый параметр функции — найденная подстрока. Если первым аргументом является объект , то следующие параметров содержат совпадения из вложенных скобок. Последние два параметра — позиция в строке, на которой произошло совпадение и сама строка.
Например, следующий вызов возвратит XXzzzz — XX , zzzz.
function replacer(str, p1, p2, offset, s)
{
return str + " - " + p1 + " , " + p2;
}
var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)
Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра , .
Если бы были три скобки, то в функцию пришлось бы добавить параметр .
Следующая функция заменяет слова типа на :
function styleHyphenFormat(propertyName)
{
function upperToHyphenLower(match)
{
return '-' + match.toLowerCase();
}
return propertyName.replace(//, upperToHyphenLower);
}
Описание
Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это ), то шаблонная строка называется «теговым шаблоном». В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слеш \.
Символы новой строки являются частью шаблонных литералов. Используя обычные строки, вставка переноса потребовала бы следующего синтаксиса:
То же с использованием шаблонных литералов:
Для вставки выражений в обычные строки вам пришлось бы использовать следующий синтаксис:
Теперь, при помощи шаблонных литералов, вам доступен «синтаксический сахар», делающий подстановки вроде той более читабельными:
Временами, вложить шаблон — это кратчайший и, возможно, более читабельный способ составить строку. Просто поместите внутрь шаблона с обратными кавычками ещё одни, обернув их в подстановку . Например, если выражение истинно, можно вернуть шаблонный литерал.
В ES5:
В ES2015 с шаблонными литералами без вложения:
В ES2015 с вложенными шаблонными литералами:
Расширенной формой шаблонных литералов являются теговые шаблоны. Они позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. В итоге, функция должна вернуть собранную строку (или что-либо совсем иное, как будет показано далее). Имя функции может быть любым.
Функция тега не обязана возвращать строку, как показано в примере ниже:
Специальное свойство , доступное для первого аргумента тегового шаблона, позволяет получить строку в том виде, в каком она была введена, без .
Вдобавок, существует метод , возвращающий точно такую же исходную строку, какую вернула бы функция шаблона по умолчанию и строковая конкатенация вместе.
Поведение в ES2016
В ECMAScript 2016 теговые шаблоны следуют правилам экранирования следующих символов:
- символы Unicode, начинающиеся с «\u», например,
- точки кода Unicode, начинающиеся с «\u{}», например,
- шестнадцатеричные представления символов, начинающиеся с «\x», например,
- восьмеричные представления символов, начинающиеся с «\», например,
Отсюда вытекает проблема теговых шаблонов: следуя грамматике ECMAScript, анализатор кода, найдя символ , будет искать корректное представление символа Unicode, но может не найти его вовсе. Пример ниже показывает это:
Поведение в ES2018
Теговые шаблоны должны позволять встраивать языки (например, DSLs или LaTeX), в которых широко используются многие другие экранирования. Предложение Редакция шаблонных литералов (уровень 4, одобренный к добавлению в стандарт ECMAScript 2018) устраняет синтаксические ограничения экранирования теговых шаблонов в ECMAScript.
Однако, некорректное экранирование символов по-прежнему нужно отображать в «приготовленном» отображении. Оно показывается в виде в «приготовленном» массиве:
Заметьте, что ограничение на экранирование символов проявляется лишь в теговых шаблонах, и не проявляется в нетеговых шаблонных литералах:
Точка с запятой
В большинстве случаев точку с запятой можно не ставить, если есть переход на новую строку.
Так тоже будет работать:
В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется .
В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!
В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:
Код выведет , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.
Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.
Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.
Пример ошибки
Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:
Пока нет необходимости знать значение скобок и . Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится , а затем .
А теперь добавим перед кодом и не поставим в конце точку с запятой:
Теперь, если запустить код, выведется только первый , а затем мы получим ошибку!
Всё исправится, если мы поставим точку с запятой после :
Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут и .
В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками . И поэтому код в первом примере выполняется, как одна инструкция. Вот как движок видит его:
Но это должны быть две отдельные инструкции, а не одна. Такое слияние в данном случае неправильное, оттого и ошибка. Это может произойти и в некоторых других ситуациях.
Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
replace()
Этот метод находит первое упоминание в заданной строке и заменяет его на .
Отдаёт новую строку, не трогая оригинальную.
Вы можете передать регулярное выражение как первый аргумент:
заменяет только первое упоминание, но а если вы будете использовать regex как поиск строки, то вы можете использовать ():
Второй параметр может быть функцией. Эта функция будет вызвана с заданным количеством аргументов, когда найдётся совпадение (или каждое совпадение в случае с regex ):
- Нужная строка
- Целое число, которое указывает позицию в строке, где произошло совпадение
- Строка
Отдающееся значение функции заменит совпадающую часть строки.
Пример:
Это работает и для обычных строк, а не только для регулярок:
В случае c regex, когда выбираются группы, все эти значения будут переданы как аргументы прямо после параметра совпадения.
Нюансы сравнения строк
Если мы
проверяем строки на равенство, то никаких особых проблем в JavaScript это не
вызывает, например:
if("abc" == "abc") console.log( "строки равны" );
if("abc" != "ABC") console.log( "строки не равны" );
Но, когда мы
используем знаки больше/меньше, то строки сравниваются в лексикографическом
порядке. То есть:
1. Если код
текущего символа одной строки больше кода текущего символа другой строки, то
первая строка больше второй (остальные символы не имеют значения), например:
console.log( "z" > "Za" ); //true
2. Если код
текущего символа одной строки меньше кода текущего символа другой строки, то
первая строка меньше второй:
console.log( "B" < "a" ); //true
3. При равенстве
символов больше та строка, которая содержит больше символов:
console.log( "abc" < "abcd" ); //true
4. В остальных
случаях строки равны:
console.log( "abc" == "abc" ); //true
Но в этом
алгоритме есть один нюанс. Например, вот такое сравнение:
console.log( "Америка" > "Japan" ); //true
Дает значение true, так как
русская буква A имеет больший
код, чем латинская буква J. В этом легко убедиться,
воспользовавшись методом
str.codePointAt(pos)
который
возвращает код символа, стоящего в позиции pos:
console.log( "А".codePointAt(), "J".codePointAt() );
Сморите, у буквы
А код равен 1040, а у буквы J – 74. Напомню,
что строки в JavaScript хранятся в
кодировке UTF-16. К чему
может привести такой результат сравнения? Например, при сортировке мы получим
на первом месте страну «Japan», а потом «Америка». Возможно, это не
то, что нам бы хотелось? И здесь на помощь приходит специальный метод для
корректного сравнения таких строк:
str.localeCompare(compareStr)
он возвращает
отрицательное число, если str < compareStr, положительное
при str > compareStr и 0 если строки
равны. Например:
console.log( "Америка".localeCompare("Japan") ); // -1
возвращает -1
как и должно быть с учетом языкового сравнения. У этого метода есть два
дополнительных аргумента, которые указаны в документации JavaScript. Первый
позволяет указать язык (по умолчанию берётся из окружения) — от него зависит
порядок букв. Второй позволяет определять дополнительные правила, например, чувствительность
к регистру.
Найти все / Заменить все
Эти две задачи решаются в javascript принципиально по-разному.
Начнём с «простого».
Для замены всех вхождений используется метод String#replace.
Он интересен тем, что допускает первый аргумент – регэксп или строку.
Если первый аргумент – строка, то будет осуществлён поиск подстроки, без преобразования в регулярное выражение.
Попробуйте:
Как видите, заменился только один плюс, а не оба.
Чтобы заменить все вхождения, String#replace обязательно нужно использовать с регулярным выражением.
В режиме регулярного выражения плюс придётся экранировать, но зато заменит все вхождения (при указании флага ):
Вот такая особенность работы со строкой.
Очень полезной особенностью является возможность работать с функцией вместо строки замены. Такая функция получает первым аргументом – все совпадения, а последующими аргументами – скобочные группы.
Следующий пример произведёт операции вычитания:
В javascript нет одного универсального метода для поиска всех совпадений.
Для поиска без запоминания скобочных групп – можно использовать String#match:
Как видите, оно исправно ищет все совпадения (флаг у регулярного выражения обязателен), но при этом не запоминает скобочные группы. Эдакий «облегчённый вариант».
В сколько-нибудь сложных задачах важны не только совпадения, но и скобочные группы. Чтобы их найти, предлагается использовать многократный вызов RegExp#exec.
Для этого регулярное выражение должно использовать флаг . Тогда результат поиска, запомненный в свойстве объекта используется как точка отсчёта для следующего поиска:
Проверка нужна т.к. значение является хорошим и означает, что вхождение найдено в самом начале строки (поиск успешен). Поэтому необходимо сравнивать именно с .
Число
Числовой тип данных () представляет как целочисленные значения, так и числа с плавающей точкой.
Существует множество операций для чисел, например, умножение , деление , сложение , вычитание и так далее.
Кроме обычных чисел, существуют так называемые «специальные числовые значения», которые относятся к этому типу данных: , и .
-
представляет собой математическую ∞. Это особое значение, которое больше любого числа.
Мы можем получить его в результате деления на ноль:
Или задать его явно:
-
означает вычислительную ошибку. Это результат неправильной или неопределённой математической операции, например:
Значение «прилипчиво». Любая операция с возвращает :
Если где-то в математическом выражении есть , то результатом вычислений с его участием будет .
Математические операции – безопасны
Математические операции в JavaScript «безопасны». Мы можем делать что угодно: делить на ноль, обращаться с нечисловыми строками как с числами и т.д.
Скрипт никогда не остановится с фатальной ошибкой (не «умрёт»). В худшем случае мы получим как результат выполнения.
Специальные числовые значения относятся к типу «число». Конечно, это не числа в привычном значении этого слова.
Подробнее о работе с числами мы поговорим в главе Числа.
String Methods
| Method | Description |
|---|---|
| charAt() | Returns the character at the specified index (position) |
| charCodeAt() | Returns the Unicode of the character at the specified index |
| concat() | Joins two or more strings, and returns a new joined strings |
| endsWith() | Checks whether a string ends with specified string/characters |
| fromCharCode() | Converts Unicode values to characters |
| includes() | Checks whether a string contains the specified string/characters |
| indexOf() | Returns the position of the first found occurrence of a specified value in a string |
| lastIndexOf() | Returns the position of the last found occurrence of a specified value in a string |
| localeCompare() | Compares two strings in the current locale |
| match() | Searches a string for a match against a regular expression, and returns the matches |
| repeat() | Returns a new string with a specified number of copies of an existing string |
| replace() | Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced |
| search() | Searches a string for a specified value, or regular expression, and returns the position of the match |
| slice() | Extracts a part of a string and returns a new string |
| split() | Splits a string into an array of substrings |
| startsWith() | Checks whether a string begins with specified characters |
| substr() | Extracts the characters from a string, beginning at a specified start position, and through the specified number of character |
| substring() | Extracts the characters from a string, between two specified indices |
| toLocaleLowerCase() | Converts a string to lowercase letters, according to the host’s locale |
| toLocaleUpperCase() | Converts a string to uppercase letters, according to the host’s locale |
| toLowerCase() | Converts a string to lowercase letters |
| toString() | Returns the value of a String object |
| toUpperCase() | Converts a string to uppercase letters |
| trim() | Removes whitespace from both ends of a string |
| valueOf() | Returns the primitive value of a String object |
All string methods return a new value. They do not change the original
variable.
Использование методов и свойств строк
Для манипулирования строками в Javascript как и во многих других языках программирования предусмотрена возможность использования методов(объектных функций) , , , … и свойств , , … . Вызов методов и свойств осуществляется через оператор (точка). Вызов объектных функций может быть осуществлен не однократно, образуя тем самым цепочки методов.
var str = «Text»;
str.italics(); //Преобразование строки в курсив (<i>Text</i>)
//Цепочка методов (каждый метод вызывается из значения, которое возвратил предыдущий метод)
str.toUpperCase().big().bold() // Результат — <b><big>TEXT</big></b>
|
1 |
varstr=»Text»; str.italics();//Преобразование строки в курсив (<i>Text</i>) //Цепочка методов (каждый метод вызывается из значения, которое возвратил предыдущий метод) str.toUpperCase().big().bold()// Результат — <b><big>TEXT</big></b> |
Применение методов и свойств к простым строковым литералам невозможно, поэтому если интерпретатор видит вызов метода из строки, то он автоматически преобразует ее в объект и делает вызов метода или свойства уже из строки — объекта.
Важно заметить, что вызов метода не переопределяет строку, т.к. работает с ее копией и начальное значение строки остается неизменным
var str = » Random text written «; //удалим пробелы с начала и конца строки
str.trim(); //Результат — «Random text written»
str; //Само значение строки не изменилось — » Random text written »
|
1 |
varstr=» Random text written «;//удалим пробелы с начала и конца строки str.trim();//Результат — «Random text written» str;//Само значение строки не изменилось — » Random text written « |
Конкатенация
Конкатенация — это объединение двух или более строк в одну большую. Объединение происходит с помощью оператора + (плюс). При конкатенации каждая последующая строка добавляется в конец предыдущей:
var str1 = "Hello "; var str2 = "World!"; document.write(str1 + str2 + "<br>"); // "Hello World!" document.write(str1 + "World!");
Попробовать »
Значение любого типа, которое объединяется со строкой, будет неявно (автоматически) преобразовано в строку и далее будет произведена конкатенация.
var str1 = "Hello "; alert(str1 + 1); // "Hello 1" alert(true + str1); // "trueHello" alert(str1 + NaN); // "Hello NaN"
Попробовать »
С этой темой смотрят:
- Типы данных
- Числа
- Infinity и NaN
- Boolean
- Преобразование типов данных
Функции шаблонизации
Можно использовать свою функцию шаблонизации для строк.
Название этой функции ставится перед первой обратной кавычкой:
Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров и сами эти параметры.
Например:
В примере выше видно, что строка разбивается по очереди на части: «кусок строки» – «параметр» – «кусок строки» – «параметр».
- Участки строки идут в первый аргумент-массив .
- У этого массива есть дополнительное свойство . В нём находятся строки в точности как в оригинале. Это влияет на спец-символы, например в символ – это перевод строки, а в – это именно два символа .
- Дальнейший список аргументов функции шаблонизации – это значения выражений в , в данном случае их три.
Зачем ?
В отличие от , в содержатся участки строки в «изначально введённом» виде.
То есть, если в строке находится или или другое особое сочетание символов, то оно таким и останется.
Это нужно в тех случаях, когда функция шаблонизации хочет произвести обработку полностью самостоятельно (свои спец. символы?). Или же когда обработка спец. символов не нужна – например, строка содержит «обычный текст», набранный непрограммистом без учёта спец. символов.
Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через – к оригинально введённому тексту без учёта стандартных спец. символов.
Функция шаблонизации может как-то преобразовать строку и вернуть новый результат.
В простейшем случае можно просто «склеить» полученные фрагменты в строку:
Функция в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML-строки DOM-узлы (функции шаблонизации не обязательно возвращать именно строку).
Или можно реализовать интернационализацию. В примере ниже функция осуществляет перевод строки.
Она подбирает по строке вида шаблон перевода (где – место для вставки параметра) и возвращает переведённый результат со вставленным именем :
Итоговое использование выглядит довольно красиво, не правда ли?
Разумеется, эту функцию можно улучшить и расширить. Функция шаблонизации – это своего рода «стандартный синтаксический сахар» для упрощения форматирования и парсинга строк.
Строковые функции
Строковые функции (методы) упрощают работу со строками в JavaScript. Давайте посмотрим, как происходит изменение регистра с помощью строковых функций. К примеру с помощью функций toLowerCase() и toUpperCase() мы можем изменить регистр символов следующим образом:
alert( 'Interface'.toUpperCase() ); // INTERFACE alert( 'Interface'.toLowerCase() ); // interface
Также при необходимости мы можем выполнить перевод в нижний регистр и для какого-нибудь определённого символа:
alert( 'Interface'toLowerCase() ); // 'i'
Подробнее о строковых функциях поговорим в следующий раз. В частности, рассмотрим, как осуществляется поиск в строке и как работать с подстрокой. Следите за новостями!
При подготовке статьи использовались следующие материалы:
— «Строки»;
— «JavaScript. Строковые методы».
