Быстрый совет: как преобразовать число в строку в JavaScript
В этом уроке разберем 4 способа, как перевести число в строку в JavaScript. В зависимости от ваших нужд рекомендуется использовать разные подходы:
Интерполяция строк: при вставке числа внутрь строки. Например, когда нужно показать на странице текст «Вы использовали 7 баллов из 24». Можно также воспользоваться конкатенацией, но аккуратно.
String или toString(): когда нужно сменить тип данных number на String. Например, когда передаем числа в функции или API, которые ожидают на вход строку. String и toString() работают почти одинаково. Они по-разному обрабатывают undefined и null.
Конвертируем тип Number в String с помощью интерполяции
Содержание статьи:
Интерполяция, возможно, самый читаемый способ перевести числа в строки. Вместо ручной конвертации вы вставляете число внутрь строки с помощью этого метода.
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 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