Быстрый совет: как преобразовать число в строку в JavaScript

0 184

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

Интерполяция строк: при вставке числа внутрь строки. Например, когда нужно показать на странице текст «Вы использовали 7 баллов из 24». Можно также воспользоваться конкатенацией, но аккуратно.

String или toString(): когда нужно сменить тип данных number на String. Например, когда передаем числа в функции или API, которые ожидают на вход строку. String и toString() работают почти одинаково. Они по-разному обрабатывают undefined и null.

Конвертируем тип Number в String с помощью интерполяции

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

Быстрый совет: как преобразовать число в строку в JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Чтобы задействовать интерполяцию, оберните строку в такие обратные кавычки ` вместо двойных кавычек « или одинарных ‘. После, внутри строки можно использовать переменные через ${}. Это шаблонный литерал, у него есть много других преимуществ. Например:

JavaScript const number = 99; console.log(`${number} percent of people love JavaScript`); // «99% of people love JavaScript»

12 const number = 99;console.log(`${number} percent of people love JavaScript`); // «99% of people love JavaScript»

Так как логируемая в консоль строка обернута в обратные кавычки, внутри нее можно использовать переменные через ${}. Пример в действии можно посмотреть в демо ниже.

Конвертация числа в строку через конкатенацию строк

Второй способ – конкатенация строк. Для этого можно использовать оператор +. Например:

JavaScript console.log(10 + «USD»); //»10USD» console.log(10 + «»); //»10″

12 console.log(10 + «USD»); //»10USD»console.log(10 + «»); //»10″

Эффективный подход (требует меньше всего кода). Однако такой способ можно сделать код менее читаемым.

Минус конкатенации строк

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

JavaScript const a = 2000; const b = 468; console.log(a + b + » motorway»); // «2468 motorway»

123 const a = 2000;const b = 468;console.log(a + b + » motorway»); // «2468 motorway»

a + b это операция сложения чисел, и она выполнится раньше конкатенации строк. После сложения чисел подходит очередь строковой переменной или литерала, после чего операция + превращается в конкатенацию. Поэтому результат будет 2468 motorway.

А теперь поменяйте код следующим образом:

Быстрый совет: как преобразовать число в строку в JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript const a = 2000; const b = 468; console.log(«it is » + a + b + » motorway»); // «it is 2000468 motorway»

123 const a = 2000;const b = 468;console.log(«it is » + a + b + » motorway»); // «it is 2000468 motorway»

Сначала выполнится операция «it is» + a. Поэтому здесь + это оператор конкатенации строки с остальной частью выражения. По такому принципу вместо операции сложения чисел a и b мы получаем конкатенацию. Обойти это можно с помощью круглых скобок:

JavaScript const a = 2000; const b = 468; console.log(«it is » + (a + b) + » motorway»); // «it is 2468 motorway»

123 const a = 2000;const b = 468;console.log(«it is » + (a + b) + » motorway»); // «it is 2468 motorway»

Сначала выполнится операция сложения чисел a и b в скобках, а затем уже конкатенация первого операнда «it is» с суммой чисел.

Конвертация числа в строку через toString

Третий способ — toString(). Этот метод доступен для типов данных JavaScript. Метод конвертирует значение, на котором вызывается, и возвращает его же уже строкой. Например:

JavaScript const number = 10; console.log(number); // 10 console.log(typeof number); // «number» const numberStr = number.toString(); console.log(numberStr); // «10» console.log(typeof numberStr); // «string»

1234567 const number = 10;console.log(number); // 10console.log(typeof number); // «number» const numberStr = number.toString();console.log(numberStr); // «10»console.log(typeof numberStr); // «string»

Этот подход даст такой же результат что и первый способ. Можете посмотреть демо.

Конвертация числа в строку с помощью String

Четвертый способ – функция-конструктор String(). Функция принимает первым параметром число, которое необходимо конвертировать. После конвертации типа возвращается значение. Например:

JavaScript const number = 10; console.log(number); // 10 console.log(typeof number); // «number» const numberStr = String(number); console.log(numberStr); // «10» console.log(typeof numberStr); // «string»

1234567 const number = 10;console.log(number); // 10console.log(typeof number); // «number» const numberStr = String(number);console.log(numberStr); // «10»console.log(typeof numberStr); // «string»

Если вывести лог в консоль значение переменной number и ее тип, там будет 10 и number. После конвертации в консоли будет 10 в виде строки и string cоответственно. Пример можно посмотреть в демо ниже.

Заключение

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

Основное отличие String() от toString() в том, что String() работает с undefined и null, а toString() нет. Поэтому для безопасности можете использовать String(), когда есть значение, содержащее число.

Интерполяцию и конкатенацию строк лучше всего применять, когда числа находятся внутри строки. В остальных случаях оба метода могут сделать код менее читаемым.

Автор: Dianne Pena

Источник: webformyself.com

Оставьте ответ

Ваш электронный адрес не будет опубликован.