From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../javascript/first_steps/strings/index.html | 284 +++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 files/ru/learn/javascript/first_steps/strings/index.html (limited to 'files/ru/learn/javascript/first_steps/strings') diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..583e29182e --- /dev/null +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,284 @@ +--- +title: Работа с текстом — строки в JavaScript +slug: Learn/JavaScript/Первые_шаги/Строки +translation_of: Learn/JavaScript/First_steps/Strings +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
+ +

Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распростанённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript.
Цель:Знакомство с основами строк в JavaScript.
+ +

Сила слов

+ +

Слова очень важны для людей — это основа нашего общения. Интернет представляет собой преимущественно текстовую среду, предназначенную для того что бы люди общались и делились информацией, поэтому нам полезно иметь контроль над словами, которые появляются в нем. {{glossary ("HTML")}} предоставляет визуальную и смысловую структуру для нашего текста, {{glossary ("CSS")}} позволяет нам стилизовать его, а JavaScript содержит ряд функций для управления строками, создания пользовательских приветственных сообщений, при необходимости отображая нужные текстовые метки, сортируя элементы в желаемом порядке и многое другое.

+ +

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

+ +

Строки — основы

+ +

С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнем с ввода некоторых основных строк в консоль, чтобы ознакомиться с ними. Мы предоставили одну ниже (вы также можете открыть эту консоль в отдельной вкладке или окне или использовать консоль разработчика браузера, если хотите).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

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

+ +
    +
  1. Для начала введите следующие строки: + 
    var string = 'The revolution will not be televised.';
+string;
    +
    2. +
  2. Как и в случае с числами, мы объявляем переменную, инициализируя ее строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. 
    3. +
  3. Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки: + 
    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»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
    4. +
  4. Следующий код будет выполнен только в том случае, если ранее была объявлена переменная string — убедитесь сами: + 
    var badString = string;
+badString;
    + В настоящее время строка badString имеет то же значение, что и строка string.
    5. +
+ +

Одиночные кавычки vs. Двойные кавычки

+ +
    +
  1. В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально: + 
    var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;
    +
    2. +
  2. Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остается на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведен пример: + 
    var badQuotes = 'What on earth?";
    +
    3. +
  3. Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идет речь (в коде ошибок нет): + 
    var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;
    +
    4. +
  4. Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается: + 
    var bigmouth = 'I've got no right to take my place...';
    + Что приводит нас к следующей теме.
    5. +
+ +

Экранирование кавычек в строках

+ +

Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой ее конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:

+ +
var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;
+ +

Так лучше. Таким же образом можно экранировать и другие символы, например "\. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.

+ +

Конкатенация строк

+ +
    +
  1. Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.
    2. +
  2. + 
    var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;
    + Результат этой программы - это переменная joined, содержащая значение "Hello, how are you?".
    3. +
  3. В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите + между ними. Попробуйте это: + 
    var multiple = one + one + one + one + two;
+multiple;
    +
    4. +
  4. Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это: + 
    var response = one + 'I am fine — ' + two;
+response;
    +
    5. +
+ +
+

Примечание: Когда вы вводите фактическую строку в свой код, заключенную в одинарные или двойные кавычки, она называется строковым литералом.

+
+ +

Конкатенация строк в контексте

+ +

Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:

+ +
<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('Concatenation_in_context', '100%', 50) }}

+ +

Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введенный текст внутри заданной переменной — в этом случае name. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной name.

+ +

Числа vs. строки

+ +
    +
  1. Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли: + 
    'Front ' + 242;
+
    + Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
    2. +
  2. Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув ее в кавычки. Попробуйте следующее (мы используем оператор typeof для того, чтобы установить является ли переменная числом или строкой): + 
    var myDate = '19' + '67';
+typeof myDate;
    +
    3. +
  3. Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции: +
      +
    • Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее: + 
      var myString = '123';
+var myNum = Number(myString);
+typeof myNum;
      +
      • +
    • С другой стороны, каждое число имеет метод, называемый toString(), который преобразует его в эквивалентную строку. Попробуй это: + 
      var myNum = 123;
+var myString = myNum.toString();
+typeof myString;
      +
      • +
    + Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через Number(), чтобы справиться с этим. Именно это мы сделали в нашей Number Guessing Game,  в строке 61.
    4. +
+ +

Заключение

+ +

Итак, это основы строк, используемых в JavaScript. В следующей статье мы рассмотрим некоторые из встроенных методов, доступных для строк в JavaScript и то, как мы можем использовать их для управления нашими строками только в той форме, в которой мы хотим.

+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
+ +

В этом модуле

+ + -- cgit v1.2.3-54-g00ecf