LearnJS

Строки в JavaScript

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

Строки записываются в кавычках:

let message = 'Привет';

Если значение находится в кавычках, JavaScript воспринимает его как текст. Даже если внутри написаны цифры.

let age = '25';

console.log(typeof age);

В консоли будет:

string

Что такое строка

Строка или string - это один из основных типов данных JavaScript. Он нужен для работы с текстом.

Например:

let userName = 'Алексей';
let city = 'Москва';
let course = 'JavaScript';

В каждой переменной лежит строка. Ее можно вывести в консоль:

let course = 'JavaScript';

console.log(course);

Результат:

JavaScript

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

let title = 'Уроки JavaScript для начинающих';
let phone = '+7 900 000-00-00';
let message = 'Сегодня разбираем строки!';

Кавычки в строках

В JavaScript строку можно записать тремя способами:

let first = 'Одинарные кавычки';
let second = "Двойные кавычки";
let third = `Обратные кавычки`;

Одинарные и двойные кавычки работают почти одинаково. Главное - если строка началась одинарной кавычкой, закончиться она должна тоже одинарной. Если началась двойной - закончиться должна двойной.

Правильно:

let message = 'Привет';

Неправильно:

let message = 'Привет";

Во втором примере кавычки разные, поэтому JavaScript не поймет, где заканчивается строка.

Если внутри строки нужна кавычка, удобно выбрать другой тип кавычек снаружи:

let message = "Курс называется 'JavaScript для начинающих'";

Или наоборот:

let message = 'Книга называется "Выразительный JavaScript"';

Обратные кавычки мы подробнее разберем в отдельном уроке про шаблонные строки. Пока достаточно знать, что они тоже могут создавать строки.

Строка в переменной

Чаще всего строку записывают в переменную, чтобы потом использовать ее в коде несколько раз.

let greeting = 'Привет';

console.log(greeting);
console.log(greeting);

Если текст нужно поменять, меняем значение переменной:

let greeting = 'Привет';

greeting = 'Здравствуйте';

console.log(greeting);

В консоли будет:

Здравствуйте

Если значение не планируется менять, можно использовать const:

const siteName = 'LearnJS.ru';

console.log(siteName);

Так мы показываем, что новое значение в эту переменную записывать не собираемся.

Объединение строк

Строки можно объединять с помощью оператора +. Такой процесс часто называют конкатенацией.

let firstName = 'Алексей';
let message = 'Привет, ' + firstName;

console.log(message);

В консоли будет:

Привет, Алексей

Обратите внимание на пробел после запятой в строке ‘Привет, ’. JavaScript не добавляет пробелы сам. Если пробел нужен, его нужно написать вручную.

let first = 'JavaScript';
let second = 'курс';

console.log(first + second);
console.log(first + ' ' + second);

Результат:

JavaScriptкурс
JavaScript курс

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

Строки и числа

Важно не путать число и строку с числом.

let first = 10;
let second = 5;

console.log(first + second);

Результат:

15

А теперь похожий пример, но значения в кавычках:

let first = '10';
let second = '5';

console.log(first + second);

Результат будет другим:

105

JavaScript увидел две строки и объединил их как текст. Поэтому получилось не 15, а 105.

Такая ошибка часто появляется после prompt(), потому что данные из него приходят строкой.

let age = prompt('Сколько вам лет?');

console.log(typeof age);

Даже если пользователь введет 25, типом значения будет string.

Длина строки

У строки есть свойство length. Оно показывает количество символов в строке.

let word = 'JavaScript';

console.log(word.length);

В консоли будет:

10

Пробелы тоже считаются символами.

let message = 'Привет мир';

console.log(message.length);

Результат:

10

В строке ‘Привет мир’ 9 букв и 1 пробел, всего 10 символов.

Символы строки

К отдельному символу строки можно обратиться по индексу. Индексы начинаются с нуля.

let word = 'JavaScript';

console.log(word[0]);
console.log(word[1]);

Результат:

J
a

Первый символ имеет индекс 0, второй - индекс 1, и так далее.

Последний символ можно получить через length - 1:

let word = 'JavaScript';

console.log(word[word.length - 1]);

В консоли будет:

t

Пока не обязательно часто использовать такую запись. Но важно понимать, что строка состоит из отдельных символов, и JavaScript умеет обращаться к ним по номеру.

Пустая строка

Пустая строка - это строка, в которой нет символов.

let message = '';

console.log(message.length);

Результат:

0

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

Важно: пустая строка ” и строка с пробелом ’ ’ - это разные значения.

console.log(''.length);
console.log(' '.length);

Результат:

0
1

Частые ошибки

Первая ошибка - забыть кавычки.

let language = JavaScript;

JavaScript подумает, что JavaScript - это имя переменной. Если такой переменной нет, появится ошибка. Правильно так:

let language = 'JavaScript';

Вторая ошибка - ждать математического сложения от строк.

console.log('10' + '5');

Результатом будет 105, потому что строки объединяются.

Третья ошибка - забывать пробел при объединении строк.

let firstName = 'Ирина';
let lastName = 'Петрова';

console.log(firstName + lastName);

Получится:

ИринаПетрова

Нужно добавить пробел:

console.log(firstName + ' ' + lastName);

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

Что дальше

Мы разобрали, что такое строки, как записывать их в кавычках, объединять, проверять длину и получать отдельные символы.

Дальше перейдем к числам. Там разберем, как JavaScript работает с целыми и дробными числами, что такое NaN и почему с вычислениями иногда нужно быть аккуратнее.