1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: Работа с текстом — строки в JavaScript
slug: Learn/JavaScript/First_steps/Strings
translation_of: Learn/JavaScript/First_steps/Strings
original_slug: Learn/JavaScript/Первые_шаги/Строки
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div>
<p class="summary">Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, <span id="result_box" lang="ru"><span>экранирование кавычек в строках и объединение строк вместе.</span></span></p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Необходимые навыки:</th>
<td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript.</td>
</tr>
<tr>
<th scope="row">Цель:</th>
<td><span class="short_text" id="result_box" lang="ru"><span>Знакомство с основами строк в JavaScript.</span></span></td>
</tr>
</tbody>
</table>
<h2 id="Сила_слов">Сила слов</h2>
<p><span id="result_box" lang="ru"><span>Слова очень важны для людей </span></span>—<span lang="ru"><span> это основа нашего общения.</span></span> <span class="short_text" id="result_box" lang="ru"><span>Интернет</span></span> <span id="result_box" lang="ru"><span>представляет собой преимущественно текстовую среду, предназначенную для</span></span> того что бы люди общались и делились информацией, поэтому <span id="result_box" lang="ru"><span>нам полезно иметь контроль над словами, которые появляются в нем.</span></span> {{glossary ("HTML")}} предоставляет визуальную и смысловую структуру для нашего текста, {{glossary ("CSS")}} позволяет нам стилизовать его, а JavaScript содержит ряд функций для управления строками, создания пользовательских приветственных сообщений, при необходимости отображая нужные текстовые метки, сортируя элементы в желаемом порядке и многое другое.</p>
<p>Практически во всех программах, которые мы показали вам на данный момент, были задействованы некоторые манипуляции со строками.</p>
<h2 id="Строки_—_основы">Строки — основы</h2>
<p>С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика</a>, чтобы познакомиться с ними.</p>
<h3 id="Создание_строки">Создание строки</h3>
<ol>
<li>Для начала введите следующие строки:
<pre class="brush: js">var string = 'The revolution will not be televised.';
string;</pre>
</li>
<li>Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li>
<li>Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки:
<pre class="brush: js example-bad">var badString = This is a test;
var badString = 'This is a test;
var badString = This is a test';</pre>
Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.</li>
<li>Следующий код будет выполнен только в том случае, если ранее была объявлена переменная <code>string</code> — убедитесь сами:
<pre class="brush: js">var badString = string;
badString;</pre>
В настоящее время строка <code>badString</code> имеет то же значение, что и строка <code>string</code>.</li>
</ol>
<h3 id="Одиночные_кавычки_vs._Двойные_кавычки">Одиночные кавычки vs. Двойные кавычки</h3>
<ol>
<li>В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально:
<pre class="brush: js">var sgl = 'Single quotes.';
var dbl = "Double quotes";
sgl;
dbl;</pre>
</li>
<li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример:
<pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre>
</li>
<li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет):
<pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?';
var dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;</pre>
</li>
<li>Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается:
<pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre>
Что приводит нас к следующей теме.</li>
</ol>
<h3 id="Экранирование_кавычек_в_строках">Экранирование кавычек в строках</h3>
<p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p>
<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...';
bigmouth;</pre>
<p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation">Escape notation</a>.</p>
<h2 id="Конкатенация_строк">Конкатенация строк</h2>
<ol>
<li>Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.</li>
<li>
<pre class="brush: js">var one = 'Hello, ';
var two = 'how are you?';
var joined = one + two;
joined;</pre>
Результат этой программы - это переменная <code>joined</code>, содержащая значение "Hello, how are you?".</li>
<li>В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите <code>+</code> между ними. Попробуйте это:
<pre class="brush: js">var multiple = one + one + one + one + two;
multiple;</pre>
</li>
<li>Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это:
<pre class="brush: js">var response = one + 'I am fine — ' + two;
response;</pre>
</li>
</ol>
<div class="note">
<p><strong>Примечание: </strong>Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется <strong>строковым литералом.</strong></p>
</div>
<h3 id="Конкатенация_строк_в_контексте">Конкатенация строк в контексте</h3>
<p>Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:</p>
<pre class="brush: html"><button>Press me</button></pre>
<pre class="brush: js">var button = document.querySelector('button');
button.onclick = function() {
var name = prompt('What is your name?');
alert('Hello ' + name + ', nice to see you!');
}</pre>
<p>{{ EmbedLiveSample('Конкатенация_строк_в_контексте', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
<p>Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае <code><strong>name</strong></code>. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной <code>name</code>.</p>
<h3 id="Числа_vs._строки">Числа vs. строки</h3>
<ol>
<li>Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли:
<pre class="brush: js">'Front ' + 242;
</pre>
Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.</li>
<li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой):
<pre class="brush: js">var myDate = '19' + '67';
typeof myDate;</pre>
</li>
<li>Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции:
<ul>
<li>Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее:
<pre class="brush: js">var myString = '123';
var myNum = Number(myString);
typeof myNum;</pre>
</li>
<li>С другой стороны, каждое число имеет метод, называемый <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это:
<pre class="brush: js">var myNum = 123;
var myString = myNum.toString();
typeof myString;</pre>
</li>
</ul>
Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через <code>Number()</code>, чтобы справиться с этим. Именно это мы сделали в нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63">Number Guessing Game, </a>в строке 61.</li>
</ol>
<h2 id="Заключение">Заключение</h2>
<p>Итак, это основы строк, используемых в JavaScript. В следующей статье мы рассмотрим некоторые из встроенных методов, доступных для строк в JavaScript и то, как мы можем использовать их для управления нашими строками только в той форме, в которой мы хотим.</p>
<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ul>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
</ul>
|
