JavaScript字符串和数字转换

89

如何在JavaScript中执行以下操作？

  1. 将“ 1”，“ 2”，“ 3”连接为“ 123”

  2. 将“ 123”转换为123

  3. 加123 + 100 = 223

  4. 将223转换为“ 223”

javascript  string  numbers 
— 用户名
source
42
我读过的几乎所有JavaScript书都涉及这些问题。但是没关系。回答问题就是StackOverflow的全部意义。@Shadi Almosri-SO有一个“不要刻薄”的规则。我看不到在这里问问题的人贬低的意义，因为那才是重点。
— Nosredna
4
@Nosredna：我完全理解提问，我只喜欢回答问题，但是我认为表明您尝试过的事实是更好的礼节，而不是简单地期望得到答案，并且对于个人的学习经历也更好。只是我的意见，并不是要刻薄！:)
— Shadi Almosri
1
@Shadi，那么应该怎么问这个问题？已经声明已经寻找答案了吗？
— Nosredna 2009年
1
当我第一次看到它时，这让我感到有点像家庭作业，但是当我重新阅读它时，我认为没有，似乎有人在尝试JavaScript并获得了意想不到的结果，并希望将其确定下来。就是说，我想知道stackoverflow.com/faq是否可能包含类似学生的荣誉代码的内容。我们在这里有点像是一所全球性大学，而且我认为试图弄清楚这个地方可能有哪些道德规范并不疯狂。也许这很疯狂。:-)
— artlung
6
@Shadi好吧，从积极的方面来说，问题和答案都在StackOverflow中，希望能对其他人有所帮助。我看到人们一直卡在这些东西上，特别是来自Java之类的语言时。人们反复问这个是有原因的-这是因为他们认为他们知道JavaScript中的表达式是如何工作的，但事实并非如此。他们基于JS以外的经验进行假设。这就是为什么坐下来尝试一些简单的测试（添加字符串和数字，并尝试一元加减）非常有用的原因。
— Nosredna，2009年

Answers:

120

您想熟悉parseInt()和toString()。

在您的工具箱中有用的是查看变量以找出其类型typeof：

<script type="text/javascript">
    /**
     * print out the value and the type of the variable passed in
     */

    function printWithType(val) {
        document.write('<pre>');
        document.write(val);
        document.write(' ');
        document.writeln(typeof val);
        document.write('</pre>');
    }

    var a = "1", b = "2", c = "3", result;

    // Step (1) Concatenate "1", "2", "3" into "123"
    // - concatenation operator is just "+", as long
    //   as all the items are strings, this works
    result = a + b + c;
    printWithType(result); //123 string

    // - If they were not strings you could do
    result = a.toString() + b.toString() + c.toString();
    printWithType(result); // 123 string

    // Step (2) Convert "123" into 123
    result = parseInt(result,10);
    printWithType(result); // 123 number

    // Step (3) Add 123 + 100 = 223
    result = result + 100;
    printWithType(result); // 223 number

    // Step (4) Convert 223 into "223"
    result = result.toString(); //
    printWithType(result); // 223 string

    // If you concatenate a number with a 
    // blank string, you get a string    
    result = result + "";
    printWithType(result); //223 string
</script>
— 阿龙
source
您将其放入脚本标签的任何特殊原因？
— 2016年
@Julix对于2009年的新手来说，可以放入html文件中学习基本概念。如果我今天回答的很新鲜，我可能会做不同的事情，但也许没有。
— artlung
53

步骤（1）将“ 1”，“ 2”，“ 3”连接为“ 123”

 "1" + "2" + "3"

要么

 ["1", "2", "3"].join("")

该加入方法符连接的阵列的物品转换成字符串，将项目间的指定的分隔符。在这种情况下，“定界符”是一个空字符串（""）。


步骤（2）将“ 123”转换为123

 parseInt("123")

在ECMAScript 5之前，必须传递基数为10的基数：parseInt("123", 10)


步骤（3）加123 + 100 = 223

 123 + 100


步骤（4）将隐秘223转换为“ 223”

 (223).toString()


放在一起

 (parseInt("1" + "2" + "3") + 100).toString()

要么

 (parseInt(["1", "2", "3"].join("")) + 100).toString()
— 帕特里克·麦克埃尔哈尼
source
4
尼斯，清楚的例子。同样，为了获得良好的形式而声名远扬-您应始终为parseInt函数指定基数。
— hotshot309 2012年
包括基数在内使我感到困惑，我滚动到另一个解释了的答案。快速说明中的编辑内容恰好在混淆时。
— ArtOfWarfare
@ArtOfWarfare谢谢，很好的编辑。在回答此问题时，必须使用基数。这些天，我可以提出一个论点以免去讨论。作为ES5，这是所有“现代”浏览器和Node.js的支持，parseInt函数（<a字符串仅0-9>）的始终使用基地10
— 帕特里克McElhaney
有趣的事实..在Netscape的原始JavaScript（大约1995年）中，parseInt的默认基数为8（除非包含字符串和8或9）
— Justin Ohms
26 
r = ("1"+"2"+"3")           // step1 | build string ==> "123"
r = +r                      // step2 | to number    ==> 123
r = r+100                   // step3 | +100         ==> 223
r = ""+r                    // step4 | to string    ==> "223"

//in one line
r = ""+(+("1"+"2"+"3")+100);
— 塞萨尔
source
感谢快速的字符串->数字转换
— mcont 2015年
如果检查是否为数字，则使用parseInt（）。例如，parseInt（“”）为NaN，但+“”为0！
— 格林
15

由于JavaScript的键入系统，这些问题一直存在。人们认为当他们得到一个数字的字符串时他们正在得到一个数字。

您可能会发现一些利用JavaScript处理字符串和数字的方式。就个人而言，我希望JavaScript在字符串连接中使用+以外的其他符号。

步骤（1）将“ 1”，“ 2”，“ 3”连接为“ 123”

result = "1" + "2" + "3";

步骤（2）将“ 123”转换为123

result = +"123";

步骤（3）加123 + 100 = 223

result = 123 + 100;

步骤（4）将223转换为“ 223”

result = "" + 223;

如果您知道为什么要这样做，那么您就不太可能遇到JavaScript表达式的麻烦。

— 诺斯雷德纳
source
3
实际上，我认为这是非常糟糕的做法，因为相对于这种情况而言，它是相当不透明的。知道某些操作会影响隐式强制转换是一个技巧，这是一个很好的技巧，但一点都不可读。沟通就是一切。
— annakata 2009年
1
我认为准确了解这些内容很重要，这样您就可以知道在阅读代码时发生了什么。许多JavaScript都很简洁，因为它是作为源发送的，而小的代码可以降低服务器成本。
— Nosredna
6
您应该通过压缩工具来实现这一目标，但是以这种形式，它的优化是非常实际的维护成本。
— annakata
6
尽管如此，了解这些内容仍然可以从一开始就避免这个问题，因为这是关于JavaScript如何处理字符串和数字的知识。这是出于好奇心。当我在字符串中添加数字时会发生什么？一元加如何运作？如果您不知道答案，那么您真的不了解JavaScript，这样的问题就会出现。
— Nosredna，2009年
11

您可以这样做：

// step 1 
var one = "1" + "2" + "3"; // string value "123"

// step 2
var two = parseInt(one); // integer value 123

// step 3
var three = 123 + 100; // integer value 223

// step 4
var four = three.toString(); // string value "223"
— 安德鲁·黑尔
source
16
最佳实践是将基数参数添加到parseInt（）函数。因此，parseInt（one，10）确保无论您扔给它什么，都不会被错误转换。
— artlung
3
同意 否则，以开头的值0将被视为八进制（以8为底的数字）。
— hotshot309 2012年
1
更令人意外的是，以0或包含8或开头的值9将失败，导致返回0。例如parseInt('034') = 28，和parseInt('09') = 0。
— 罗伯特·马丁
9

要将字符串转换为数字，请减去0。要将数字转换为字符串，请添加“”（空字符串）。

5 +1将给您6

（5 +“”）+ 1会给您“ 51”

（“ 5”-0）+1将给您6

— 罗伯特·L
source
1
依靠基于这样的语言怪癖的技巧可能会导致真正的模糊。例如，“ 5” -0确实会导致数字5，但“ 5” +0会导致字符串“ 50”。（是的，我知道已经过了很多年，我什至在读这篇文章时都感到有些难过。）
— 尼克·赖斯
6

parseInt的功能与scanf类似：

parseInt（“ 12 monkeys”，10）是一个值为'12'的数字
+“ 12只猴子”是数值为“ NaN”的数字
Number（“ 12只猴子”）是一个值为'NaN'的数字

— Xander
source
1

以下是一个非常令人讨厌的示例，说明JavaScript如何使您陷入困境：

如果您只是尝试使用 parseInt()转换为数字，然后将另一个数字添加到结果中，它将连接两个字符串。

但是，您可以通过将sum表达式放在括号中来解决问题，如下例所示。

结果：他们的年龄总和是：98; 他们的年龄总和不是：5048

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new Person("John", "Doe", "50", "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML = "Their age sum is: "+
 (parseInt(myFather.age)+myMother.age)+"; Their age sum is NOT: " +
 parseInt(myFather.age)+myMother.age; 
</script>

</body>
</html>
展开摘要

— jpsousa
source
0

最简单的是当您想使整数成为字符串时

var a,b, c;
a = 1;
b = a.toString(); // This will give you string

现在，从字符串类型的变量b中，我们可以获得整数

c = b *1; //This will give you integer value of number :-)

如果要检查上面是一个数字。如果不确定b是否包含整数，则可以使用

if(isNaN(c*1)) {
  //NOt a number
}
else //number
— 希蒂兹
source
0

我们可以使用一元加号运算符先将其转换为数字，然后再进行加法运算。见下文：-

var a = "4";
var b = "7";
var sum = +a + +b;
— singhkumarhemant
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.