Как преобразовать число в строку в JavaScript?

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

В этом руководстве рассматриваются четыре способа преобразования числа в строку в JavaScript.

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

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

Чтобы использовать интерполяцию, оберните строку обратными кавычками ( `). Затем в строку можно вставить любую переменную с помощью `${}`.

Например:

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

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

Вы можете увидеть пример в действии в следующей демонстрации CodePen.

const input = document.querySelector("#number");
const resultElm = document.querySelector("#result");

input.addEventListener('keyup', function (e) {
  resultElm.textContent = `${input.value} percent of people love JavaScript`
});

Преобразование числа в строку с помощью конкатенации строк

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

Например:

console.log(10 + "USD"); //"10USD"
console.log(10 + ""); //"10"

const number = 10;
document.getElementById("variableValue").textContent = number;
document.getElementById("originalType").textContent = typeof number;
const numberStr = number + '';
document.getElementById("afterConvertValue").textContent = numberStr;
document.getElementById("afterConvert").textContent = typeof numberStr;

Хотя этот подход эффективен (поскольку требует наименьшего количества кода), он может сделать код менее читаемым.

Предупреждение о конкатенации строк

При использовании этого подхода с более чем одним числом может произойти неожиданный результат.

Например:

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, что приводит к операции сложения между двумя переменными. 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"

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

const number = 10;
document.getElementById("variableValue").textContent = number;
document.getElementById("originalType").textContent = typeof number;
const numberStr = number.toString();
document.getElementById("afterConvertValue").textContent = numberStr;
document.getElementById("afterConvert").textContent = typeof numberStr;

Преобразование числа в строку с помощью строки

Четвертый подход заключается в использовании 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соответственно.

Вы можете увидеть пример в действии в следующей демонстрации CodePen.

const number = 10;
document.getElementById("variableValue").textContent = number;
document.getElementById("originalType").textContent = typeof number;
const numberStr = String(number);
document.getElementById("afterConvertValue").textContent = numberStr;
document.getElementById("afterConvert").textContent = typeof numberStr;

Заключение

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

Основное различие между использованием String()и toString()заключается в том, что оно String()работает со значениями undefinedи, а не работает. Итак, если у вас есть значение, которое должно содержать число, но вы хотите быть в безопасности при преобразовании его в строку, вы можете использовать.nulltoString()String()

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