От автора: JavaScript – достаточно гибкий язык. Он предлагает множество способов, как конвертировать типы данных. В этом коротком уроке мы узнаем, как перевести число в строку в JavaScript. Конвертация может понадобиться, если нужно сделать числа более читаемыми для пользователей. Например, для вставки внутрь предложения.
В этом уроке разберем 4 способа, как перевести число в строку в JavaScript. В зависимости от ваших нужд рекомендуется использовать разные подходы:
Интерполяция строк: при вставке числа внутрь строки. Например, когда нужно показать на странице текст «Вы использовали 7 баллов из 24». Можно также воспользоваться конкатенацией, но аккуратно.
String или toString(): когда нужно сменить тип данных number на String. Например, когда передаем числа в функции или API, которые ожидают на вход строку. String и toString() работают почти одинаково. Они по-разному обрабатывают undefined и null.
Конвертируем тип Number в String с помощью интерполяции
Интерполяция, возможно, самый читаемый способ перевести числа в строки. Вместо ручной конвертации вы вставляете число внутрь строки с помощью этого метода.
Чтобы задействовать интерполяцию, оберните строку в такие обратные кавычки ` вместо двойных кавычек « или одинарных ‘. После, внутри строки можно использовать переменные через ${}. Это шаблонный литерал, у него есть много других преимуществ. Например:
const number = 99; console.log(`${number} percent of people love JavaScript`); // "99% of people love JavaScript"Так как логируемая в консоль строка обернута в обратные кавычки, внутри нее можно использовать переменные через ${}. Пример в действии можно посмотреть в демо ниже.
Конвертация числа в строку через конкатенацию строк
Второй способ – конкатенация строк. Для этого можно использовать оператор +. Например:
console.log(10 + "USD"); //"10USD" console.log(10 + ""); //"10"
Эффективный подход (требует меньше всего кода). Однако такой способ можно сделать код менее читаемым.
Минус конкатенации строк
Если использовать более одного числа, результат может быть неожиданным. Например:
const a = 2000; const b = 468; console.log(a + b + " motorway"); // "2468 motorway"
a + b это операция сложения чисел, и она выполнится раньше конкатенации строк. После сложения чисел подходит очередь строковой переменной или литерала, после чего операция + превращается в конкатенацию. Поэтому результат будет 2468 motorway.
А теперь поменяйте код следующим образом:
const a = 2000; const b = 468; console.log("it is " + a + b + " motorway"); // "it is 2000468 motorway"Сначала выполнится операция «it is» + a. Поэтому здесь + это оператор конкатенации строки с остальной частью выражения. По такому принципу вместо операции сложения чисел a и b мы получаем конкатенацию. Обойти это можно с помощью круглых скобок:
const a = 2000; const b = 468; console.log("it is " + (a + b) + " motorway"); // "it is 2468 motorway"Сначала выполнится операция сложения чисел a и b в скобках, а затем уже конкатенация первого операнда «it is» с суммой чисел.
Конвертация числа в строку через toString
Третий способ — toString(). Этот метод доступен для типов данных 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"
Этот подход даст такой же результат что и первый способ. Можете посмотреть демо.
Конвертация числа в строку с помощью String
Четвертый способ – функция-конструктор String(). Функция принимает первым параметром число, которое необходимо конвертировать. После конвертации типа возвращается значение. Например:
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"
Если вывести лог в консоль значение переменной number и ее тип, там будет 10 и number. После конвертации в консоли будет 10 в виде строки и string cоответственно. Пример можно посмотреть в демо ниже.
Заключение
В уроке разобраны четыре способа, как конвертировать число в строку в JavaScript. Все методы могут давать одинаковый результат на числах. Однако бывают случаи, когда лучше применить один подход вместо других.
Основное отличие String() от toString() в том, что String() работает с undefined и null, а toString() нет. Поэтому для безопасности можете использовать String(), когда есть значение, содержащее число.
Интерполяцию и конкатенацию строк лучше всего применять, когда числа находятся внутри строки. В остальных случаях оба метода могут сделать код менее читаемым.
Автор: Dianne Pena
Источник: www.sitepoint.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен