Главная страница » JavaScript » 27. Переменные и конкатенация

27. Переменные и конкатенация

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

Основные концепции

Объявление переменных

Для объявления переменных в JavaScript используются ключевые слова let, const и var.
let — для переменных, которые могут изменяться.
const — для переменных, которые не должны изменяться.
var — устаревший способ объявления переменных, который следует избегать в современном коде.

				
					let userName = 'Alice';
const pi = 3.14;
var age = 25; // Не рекомендуется

Присваивание значений переменным

Присваивание значения переменной выполняется с помощью оператора =.

				
					let userName;
userName = 'Bob'; // Присваивание значения переменной

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

Конкатенация — это процесс объединения двух или более строк.
В JavaScript конкатенация строк выполняется с помощью оператора +.

				
					let greeting = 'Hello';
let name = 'Alice';
let message = greeting + ', ' + name + '!'; // "Hello, Alice!"

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

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

				
					let product = 'laptop';
let price = 1200;
let info = 'The price of the ' + product + ' is $' + price; // "The price of the laptop is $1200"

Шаблонные строки (Template literals)

В ES6 был введен новый способ конкатенации строк с использованием шаблонных строк.
Шаблонные строки заключаются в обратные кавычки (`) и позволяют встраивать переменные и выражения с помощью ${}.

				
					let firstName = 'John';
let lastName = 'Doe';
let fullName = `${firstName} ${lastName}`; // "John Doe"
let info = `The price of the ${product} is $${price}`; // "The price of the laptop is $1200"

Примеры

Простой пример с let и const

				
					let city = 'New York';
const country = 'USA';
console.log(city); // New York
console.log(country); // USA

Конкатенация строк с помощью оператора +

				
					let firstName = 'Jane';
let lastName = 'Smith';
let fullName = firstName + ' ' + lastName;
console.log(fullName); // Jane Smith

Конкатенация строк с шаблонными строками

				
					let item = 'phone';
let cost = 500;
let description = `The cost of the ${item} is $${cost}`;
console.log(description); // The cost of the phone is $500

Распространенные ошибки

Пропущенные скобки:

Пропуск скобок в сложных выражениях может привести к неправильным результатам.

				
					let result = 2 + 3 * 4; // 14 (неправильно, ожидаем 20)
let correctResult = (2 + 3) * 4; // 20 (правильно)

Использование const для изменяемых переменных

Попытка изменить значение переменной, объявленной с const, приведет к ошибке.

				
					const age = 30;
// age = 31; // TypeError: Assignment to constant variable.

Пропущенные обратные кавычки в шаблонных строках

				
					let name = 'Tom';
// let greeting = 'Hello, ${name}!'; // SyntaxError: Unexpected token '$'
let correctGreeting = `Hello, ${name}!`; // "Hello, Tom!"

Заключение

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

Тестовое задание

Объявите переменные firstName и lastName и присвойте им значения. Затем объедините их в одну строку fullName с пробелом между именами и выведите результат в консоль.
Объявите константу city и переменную country, присвойте им значения, затем создайте строку, которая описывает местоположение и выведите ее в консоль.
Создайте шаблонную строку, которая включает в себя значения переменных product и price, и выведите результат в консоль.

Пример решения:

				
					// Задание 1
let firstName = 'John';
let lastName = 'Doe';
let fullName = firstName + ' ' + lastName;
console.log(fullName); // John Doe

// Задание 2
const city = 'San Francisco';
let country = 'USA';
let location = `The city is ${city}, and the country is ${country}.`;
console.log(location); // The city is San Francisco, and the country is USA.

// Задание 3
let product = 'tablet';
let price = 300;
let productInfo = `The price of the ${product} is $${price}.`;
console.log(productInfo); // The price of the tablet is $300.

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

Регистрация

Вход

Поиск