--- title: Работа с текстом — строки в JavaScript slug: Learn/JavaScript/First_steps/Strings translation_of: Learn/JavaScript/First_steps/Strings original_slug: Learn/JavaScript/Первые_шаги/Строки ---
Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.
Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript. |
---|---|
Цель: | Знакомство с основами строк в JavaScript. |
Слова очень важны для людей — это основа нашего общения. Интернет представляет собой преимущественно текстовую среду, предназначенную для того что бы люди общались и делились информацией, поэтому нам полезно иметь контроль над словами, которые появляются в нем. {{glossary ("HTML")}} предоставляет визуальную и смысловую структуру для нашего текста, {{glossary ("CSS")}} позволяет нам стилизовать его, а JavaScript содержит ряд функций для управления строками, создания пользовательских приветственных сообщений, при необходимости отображая нужные текстовые метки, сортируя элементы в желаемом порядке и многое другое.
Практически во всех программах, которые мы показали вам на данный момент, были задействованы некоторые манипуляции со строками.
С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в консоль разработчика, чтобы познакомиться с ними.
var string = 'The revolution will not be televised.'; string;
var badString = This is a test; var badString = 'This is a test; var badString = This is a test';Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
string
— убедитесь сами:
var badString = string; badString;В настоящее время строка
badString
имеет то же значение, что и строка string
.var sgl = 'Single quotes.'; var dbl = "Double quotes"; sgl; dbl;
var badQuotes = 'What on earth?";
var sglDbl = 'Would you eat a "fish supper"?'; var dblSgl = "I'm feeling blue."; sglDbl; dblSgl;
var bigmouth = 'I've got no right to take my place...';Что приводит нас к следующей теме.
Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:
var bigmouth = 'I\'ve got no right to take my place...'; bigmouth;
Так лучше. Таким же образом можно экранировать и другие символы, например "\
. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.
var one = 'Hello, '; var two = 'how are you?'; var joined = one + two; joined;Результат этой программы - это переменная
joined
, содержащая значение "Hello, how are you?".+
между ними. Попробуйте это:
var multiple = one + one + one + one + two; multiple;
var response = one + 'I am fine — ' + two; response;
Примечание: Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется строковым литералом.
Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:
<button>Press me</button>
var button = document.querySelector('button'); button.onclick = function() { var name = prompt('What is your name?'); alert('Hello ' + name + ', nice to see you!'); }
{{ EmbedLiveSample('Конкатенация_строк_в_контексте', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае name
. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной name
.
'Front ' + 242;Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
typeof
для того, чтобы установить является ли переменная числом или строкой):
var myDate = '19' + '67'; typeof myDate;
var myString = '123'; var myNum = Number(myString); typeof myNum;
toString()
, который преобразует его в эквивалентную строку. Попробуй это:
var myNum = 123; var myString = myNum.toString(); typeof myString;
Number()
, чтобы справиться с этим. Именно это мы сделали в нашей Number Guessing Game, в строке 61.Итак, это основы строк, используемых в JavaScript. В следующей статье мы рассмотрим некоторые из встроенных методов, доступных для строк в JavaScript и то, как мы можем использовать их для управления нашими строками только в той форме, в которой мы хотим.