Строки и работа с символами — Введение в программирование

Транскрипт урока

Помните свою первую программу "hello, world"?

console.log("Hello, World!");

Сейчас вы уже знаете, что здесь происходит вызов функции, а функция console.log принимает аргумент. В данном случае аргумент — не число, а "строка". Так мы называем фрагменты текста в программировании, потому что они как последовательность букв на веревке.

Строки есть везде. Сейчас я читаю сценарий, и текстовый файл — это длинная строка. Веб-сайт, на котором вы смотрите эти видео, содержит множество слов — всё это строки. Работа Google запоминать строки — в этом суть поиска. Файлы и папки в вашем компьютере идентифицируются через их названия, которые так же являются всего лишь строками.

Так же, как мы это делали с числами, мы можем создать константу из строки:

const str = "Hello";

Вы можете использовать одиночные кавычки или двойные, не так важно, главное чтобы они были одинаковые и в начале и в конце строки.

Если вам необходимо использовать реальные кавычки внутри строки, тогда используйте другой знак для её создания. Например:

const str = 'They call him "Harry", and he likes it';
///They call him "Harry", and he likes it

Здесь одиночные кавычки используются для формулирования или ограничения строки, и тогда у нас есть возможность поставить двойные внутри. Или наоборот:

const str = "They call him 'Harry', and he likes it";
/// They call him 'Harry', and he likes it

Двойные снаружи — одиночные внутри.

Но что делать, если такое невозможно, и вам нужно использовать одинаковый тип кавычек и для формулировки строки и внутри неё. Если вы попробуете сделать так

const str = "They call him "Harry", and he likes it";

то получите ошибку, потому что ваша строка поломана. Программа сломается в этом месте, потому что тут присутствует вторая закрывающая кавычка такого же типа, а затем идёт странное слово, которое ничего не означает, а потом новая строка. Это неправильный JavaScript.

Нам нужно объяснить интерпретатору JavaScript, что некоторые кавычки он должен воспринимать иначе. Они не должны означать "начало строки" или "конец строки", они должны означать "символ кавычек".

Это называется "экранированием". Добавьте символ экранирования, обратный слеш \ перед символом, и символ "изолируется" от своей специфической роли и превратится в обычный знак в строке.

const str = "They call him \"Harry\", and he likes it";
const str2 = 'They call her \'Ann\', and she likes it';

// They call him "Harry", and he likes it
// They call her 'Ann', and she likes it

Этот символ экранирования может использоваться для включения других специальных символов в строку.

Тут есть три момента.

Первый: если нам нужен обратный слеш в строке, то он должен быть экранирован другим обратным слешем.

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

Третье: обратный слеш-n — это другая управляющая последовательность, которая представляет собой новую строчку. Считай, что вы нажмёте клавишу Enter, когда набираете текст. Поэтому, всё, что следует дальше, перейдет на новую строчку .

Теперь давайте попробуем написать функцию. Она будет принимать строку — имя и возвращать другую строку — приветствие. Вот как это должно работать:

const result = greet("Sherlock");   // "Well hello, Sherlock"

Эта функция должна уметь каким-то образом принимать входящую строку и склеивать её с другой строкой. Такой процесс называется "конкатенацией" и в JavaScript он реализуется знаком плюс, как при сложении чисел:

const greet = (str) => {
  return "Well hello, " + str;
}

Теперь другой пример. Эта функция принимает строку и возвращает ту же строку, но без каждой второй буквы. Например, "California" становится "Clfri".

const skip = (str) => {
  let i = 0;
  let result = '';

  while (i < str.length) {
    result = result + str[i];
    i = i + 2;
  }

  return result;
}

Такие квадратные скобки позволяют нам получать индивидуальные символы из строки. Как и во многих процессах в программировании, вы начинаете отсчёт с 0, а не от 1. Поэтому первый символ str это str[0], второй — str[1], и так далее. Это число называется "индексом".

Функция skip принимает аргумент, создаёт две переменных — i для счётчика и result для итоговой строки. Счётчик — это 0, потому что нам нужно начать с первого символа, а result это пустая строка — мы будем добавлять символы к ней один за другим.

Затем следует цикл while, с условием , что "i меньше, чем длина строки". Длина означает "сколько символов". Длина строки "cats" — 4 — в ней 4 символа, 4 буквы.

Пока счётчик меньше, чем длина, мы склеиваем или конкатенируем результирующую строку с символом по индексу i. Затем добавляем 2 к счётчику. Два, а не один, потому что нам нужно пропустить один символ.

В какой-то момент счетчик станет достаточно большим для того, чтобы условие цикла стало ложным, и функция вернёт result.

Давайте попробуем вызвать функцию с аргументом 'cats':

const skipped = skip('cats');

Длина 'cats' — 4. Несмотря на то, что индексы начинаются с 0, длина — это действительное количество. 'c' — не 0 букв, это одна буква. Поэтому длина 'cats' — 4, но индекс его последней буквы — 3.

1. 0 меньше четырёх, поэтому войти в цикл while
2. конкатенировать строку с символом по индексу 0 — это 'c'
3. увеличить счётчик на 2
4. 2 меньше 4, поэтому повторить
5. конкатенировать строку с символом по индексу 2 — это 't'. строка теперь стала 'ct'
6. увеличить счётчик на 2
7. 4 не меньше 4, поэтому больше не повторять
8. вернуть результат — 'ct'

Вас ждут тест и практическое упражнение.

Дополнение к уроку

Неизменяемость

В JavaScript строки являются неизменяемыми, так же говорят "immutable". Это означает, что какие бы вы к ним не применяли функции, они не производят in-place замены (то есть не производят изменения самой строки). Любые строковые функции, примененные к строкам, возвращают новую строку. Это верно и в том случае, когда мы обращаемся к конкретному символу в строке.

Пример:

const str = 'hello';

// toUpperCase возвращает ту же строку в верхнем регистре
str.toUpperCase(); // HELLO
console.log(str); // => hello

str[0].toUpperCase(); // H
console.log(str); // => hello

str[0] = 'W';
console.log(str); // => hello

Лексикографический порядок

Лексикографический порядок — это, другими словами, алфавитный порядок. Такой порядок используется в словарях, телефонных справочниках, записных книжках и так далее.

В JavaScript вы можете сравнивать строки с помощью > и <, и сравнение будет происходить именно лексикографически.

'a' < 'b' // true
'a' > 'b' // false
'abc' > 'abc' // false
'abb' > 'abc' // false
'abd' > 'abc' // true

Помните, '8' это не число, а строка.

Интерполяция

Кроме одиночных '' и двойных кавычек "", современный JavaScript содержит обратные тики (backticks):

``

С обратными тиками вы можете использовать интерполяцию, вместо конкатенации. Вот, смотрите:

const name = "Alex";
const a = 10;
const b = 12;
console.log(`His name was ${name} and his age was ${a + b}`);

Такой код выведет на экран His name was Alex and his age was 22. Внутрь ${} вы можете поместить любое выражение.

Интерполяция предпочтительнее конкатенации. Мы советуем не использовать конкатенацию вообще. Вот некоторые из причин:

• Такой код заставляет больше думать, потому что синтаксически + больше смахивает на сложение.
• Из-за слабой типизации можно легко получить не тот результат. Конкатенация может породить ошибки.
• Сложные строки при использовании конкатенации невозможно нормально разобрать в голове и понять, как они устроены.

Выводы

• Строка — это последовательность символов
• Пустая строка — это тоже строка (последовательность нуля символов)
• Обозначается единичными или двойными кавычками

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

const str1 = "Hello";
const str2 = 'Hello';

Возможно включить кавычку одного типа внутрь строки, окружив её кавычками другого типа:

const str1 = 'They call him "Harry", and he likes it';
const str2 = "They call him 'Harry', and he likes it";

Если в строке используются кавычки того же типа, они должны быть экранированы с помощью обратного слеша \:

const str1 = 'They call her \'Ann\', and she likes it';
const str2 = "They call her \"Ann\", and she likes it";

Если строка включает обратный слеш (именно как символ, который хочется иметь в строке), он должен быть экранирован другим обратным слешем:

const str = "This is a backslash \\ here"
// This is a backslash \ here

Также существуют управляющие символы — специальные комбинации, которые генерируют невидимые детали:

const str = "There is a tab \t and here \ncomes the new line!"

// Here is a tab    and here
// comes the new line!

\t — это табуляция, \n это перенос на новую строку.

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

Строки могут склеиваться друг с другом. Такой процесс называется конкатенацией и задаётся символом +:

const name = "Alex";
const age = 22;
console.log("His name is " + name + " and his age is " + age);

// His name is Alex and his age is 22

Строки будут склеены в том порядке, в котором они указаны: "mos" + "cow" → "moscow", а "cow" + "mos" → "cowmos"

Доступ к индивидуальным символам

str[i] это i-ый символ строки str, начинающейся с 0. Например, "hexlet"[0] это h, а "hexlet"[2] это x.

Вот функция, которая принимает строку и возвращает копию этой строки без каждой второй буквы. Например, "hexlet" становится "hxe".

const skip = (str) => {
  let i = 0;
  let result = '';

  while (i < str.length) {
    result = result + str[i];
    i = i + 2;
  }

  return result;
}

str.length это длина str, то есть количество символов. Это просто количество, поэтому мы не начинаем отсчёт от 0. Например, "food".length это 4.

Дополнительные материалы

1. Escape notation

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.