การแปลงสตริงและตัวเลข JavaScript

90

ฉันจะทำสิ่งต่อไปนี้ใน JavaScript ได้อย่างไร?

ต่อ "1", "2", "3" เป็น "123"
แปลง "123" เป็น 123
เพิ่ม 123 + 100 = 223
แอบแฝง 223 เป็น "223"

javascript string numbers

42

หนังสือ JavaScript เกือบทั้งหมดที่ฉันอ่านจัดการกับปัญหาเหล่านี้ แต่ไม่เป็นไร การตอบคำถามคือสิ่งที่ StackOverflow เป็นข้อมูลเกี่ยวกับ @Shadi Almosri - SO มีกฎ "อย่าหมายความว่า" ฉันไม่เห็นจุดที่ดูถูกคนที่ถามคำถามที่นี่เพราะนั่นคือประเด็นของสถานที่

— Nosredna

4

@Nosredna: ฉันเข้าใจการถามคำถามอย่างสมบูรณ์ฉันไม่ชอบอะไรมากไปกว่าการตอบคำถามเหล่านี้ แต่ฉันคิดว่าการแสดงความจริงที่ว่าคุณได้พยายามเป็นมารยาทที่ดีกว่าเพียงแค่คาดหวังคำตอบและยังดีกว่าสำหรับประสบการณ์การเรียนรู้ส่วนตัว แค่ความคิดเห็นของฉันไม่ได้พยายามที่จะใจร้าย! :)

— Shadi Almosri

1

@Shadi ดังนั้นคำถามควรถามอย่างไร? พร้อมประกาศว่ามองหาคำตอบอยู่แล้ว?

— Nosredna

1

มันทำให้ฉันต้องทำการบ้านเมื่อฉันเห็นมันครั้งแรก แต่เมื่อฉันอ่านซ้ำฉันคิดว่าไม่ใช่ดูเหมือนว่ามีคนทดลองใช้ JavaScript และได้ผลลัพธ์ที่ไม่คาดคิดและต้องการที่จะตอกมันลง ที่กล่าวว่าฉันสงสัยว่าstackoverflow.com/faqอาจมีบางอย่างเช่นรหัสเกียรติยศสำหรับนักเรียน เราเป็นมหาวิทยาลัยระดับโลกที่นี่และฉันไม่คิดว่ามันจะบ้าที่จะพยายามคิดว่าชุดของจริยธรรมสำหรับสถานที่นี้เป็นอย่างไร หรืออาจจะเป็นบ้า :-)

— artlung

6

@Shadi ในด้านบวกคำถามและคำตอบอยู่ใน StackOverflow และหวังว่าจะช่วยคนอื่นได้ ฉันเห็นผู้คนติดอยู่กับสิ่งนี้ตลอดเวลาโดยเฉพาะเมื่อมาจากภาษาเช่น Java มีเหตุผลที่ผู้คนถามเรื่องนี้ซ้ำแล้วซ้ำอีกนั่นเป็นเพราะพวกเขาคิดว่าพวกเขารู้ว่านิพจน์ใน JavaScript ทำงานอย่างไร แต่ไม่ทำ พวกเขาตั้งสมมติฐานจากประสบการณ์ภายนอก JS นั่นเป็นเหตุผลว่าทำไมจึงมีประโยชน์มากที่จะลองทดสอบง่ายๆด้วยการเพิ่มสตริงและตัวเลขและลองใช้ยูนารีบวกและลบ

— Nosredna

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>

— artlung
แหล่งที่มา

เหตุผลใดที่คุณใส่สิ่งนี้ในแท็กสคริปต์

— Julix

@Julix สำหรับมือใหม่ในปี 2009 การเข้าสู่ไฟล์ html เพื่อเรียนรู้แนวคิดพื้นฐาน ถ้าฉันตอบคำถามใหม่ในวันนี้ฉันอาจจะทำมันแตกต่างออกไป แต่อาจจะไม่

— artlung

53

ขั้นตอนที่ (1) ต่อ "1", "2", "3" เป็น "123"

 "1" + "2" + "3"

หรือ

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

เข้าร่วมวิธี concatenates รายการของอาร์เรย์เป็นสตริงวางคั่นระหว่างรายการที่ระบุ ในกรณีนี้ "ตัวคั่น" คือสตริงว่าง ( "")

ขั้นตอน (2) แปลง "123" เป็น 123

 parseInt("123")

ก่อนECMAScript 5จำเป็นต้องส่งผ่านเลขฐาน 10:parseInt("123", 10)

ขั้นตอนที่ (3) เพิ่ม 123 + 100 = 223

 123 + 100

ขั้นตอนที่ (4) แอบแฝง 223 เป็น "223"

 (223).toString()

ใส่มันทั้งหมด Togther

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

หรือ

 (parseInt(["1", "2", "3"].join("")) + 100).toString()

— Patrick McElhaney
แหล่งที่มา

4

ตัวอย่างที่ดีและชัดเจน นอกจากนี้ความรุ่งโรจน์สำหรับรูปแบบที่ดีคุณควรระบุรัศมีสำหรับparseIntฟังก์ชันเสมอ

— hotshot309

รวมทั้งรัศมีทำให้ฉันสับสนและฉันเลื่อนไปยังคำตอบอื่นที่มีการอธิบาย แก้ไขในคำอธิบายสั้น ๆ เพื่อให้ตรงจุดที่สับสน

— ArtOfWarfare

@ArtOfWarfare ขอบคุณการแก้ไขที่ดี รัศมีนั้นจำเป็นสำหรับคำตอบนี้ ทุกวันนี้ฉันสามารถโต้แย้งเพื่อทิ้งมันไปได้ ใน ES5 ซึ่งเบราว์เซอร์ที่ "ทันสมัย" และ Node.js ทั้งหมดรองรับ parseInt (<a string with only 0-9>) จะใช้ฐาน 10 เสมอ

— Patrick McElhaney

fun fact .. ใน JavaScript ดั้งเดิมของ Netscape (ประมาณปี 1995) ค่าเริ่มต้นสำหรับ parseInt คือ 8 (เว้นแต่สตริงที่มีและ 8 หรือ 9)

— Justin Ohms

27

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);

— เซซาร์ล
แหล่งที่มา

ขอบคุณสำหรับสตริงที่รวดเร็ว -> การแปลงตัวเลข

— mcont

หากคุณตรวจสอบว่าเป็นตัวเลขหรือไม่ให้ใช้ parseInt () ตัวอย่างเช่น parseInt ("") คือ NaN แต่ + "" เป็น 0!

— greene

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

— Nosredna
แหล่งที่มา

3

ฉันคิดว่านี่เป็นการฝึกที่แย่มากเพราะมันค่อนข้างทึบที่จะเกิดขึ้น การรู้ว่าการดำเนินการบางอย่างส่งผลกระทบต่อการแสดงโดยนัยเป็นเคล็ดลับและเป็นสิ่งที่ดีที่ควรรู้ แต่ก็ไม่สามารถอ่านได้เลย การสื่อสารคือทุกสิ่งทุกอย่าง

— annakata

1

ฉันคิดว่าสิ่งสำคัญคือต้องรู้สิ่งเหล่านี้อย่างแม่นยำเพื่อที่คุณจะได้รู้ว่าเกิดอะไรขึ้นเมื่อคุณอ่านโค้ด JavaScript ส่วนใหญ่ถูกตัดทอนเนื่องจากส่งเป็นซอร์สและโค้ดขนาดเล็กอาจหมายถึงการลดต้นทุนเซิร์ฟเวอร์

— Nosredna

6

คุณควรบรรลุสิ่งนี้ผ่านเครื่องมือบีบอัดแม้ว่าในรูปแบบนี้จะเป็นการเพิ่มประสิทธิภาพด้วยต้นทุนการบำรุงรักษาที่แท้จริง

— annakata

6

ถึงกระนั้นการรู้ว่าสิ่งเหล่านี้จะช่วยป้องกันคำถามได้ตั้งแต่แรกซึ่งเป็นการขาดความรู้เกี่ยวกับวิธีที่ JavaScript เกี่ยวข้องกับสตริงและตัวเลข เป็นเรื่องของความอยากรู้อยากเห็นทางปัญญา จะเกิดอะไรขึ้นเมื่อฉันเพิ่มตัวเลขลงในสตริง Unary plus ทำงานอย่างไร? หากคุณไม่ทราบคำตอบแสดงว่าคุณไม่รู้จัก JavaScript จริงๆและคำถามประเภทนี้จะเกิดขึ้น

— Nosredna

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"

— แอนดรูแฮร์
แหล่งที่มา

16

แนวทางปฏิบัติที่ดีที่สุดคือการเพิ่มพารามิเตอร์ radix ให้กับฟังก์ชัน parseInt () ดังนั้น parseInt (หนึ่ง, 10) จึงมั่นใจได้ว่าสิ่งที่คุณโยนมันจะไม่ถูกแปลงผิด

— artlung

3

เห็นด้วย มิฉะนั้นค่าเริ่มต้นด้วย0จะเห็นเป็น(ฐาน 8) ฐานแปดหมายเลข

— hotshot309

1

แม้ไม่คาดคิดเพิ่มเติมค่าเริ่มต้นด้วย0แล้วมี8หรือ9จะไม่นำไปสู่การกลับมาของ 0. เช่น, และparseInt('034') = 28 parseInt('09') = 0

— Robert Martin

9

ในการแปลงสตริงเป็นตัวเลขให้ลบ 0 หากต้องการแปลงตัวเลขเป็นสตริงให้เพิ่ม "" (สตริงว่าง)

5 + 1 จะให้ 6

(5 + "") + 1 จะให้ "51"

("5" - 0) + 1 จะให้ 6

— โรเบิร์ตแอล
แหล่งที่มา

1

การใช้กลเม็ดตามนิสัยใจคอทางภาษาเช่นนี้อาจนำไปสู่ความสับสนอย่างแท้จริง เช่น "5" -0 จะให้ผลลัพธ์เป็นเลข 5 แต่ "5" +0 ให้ผลลัพธ์เป็นสตริง "50" (ใช่ฉันรู้ว่าหลายปีต่อมาและอาจเป็นเรื่องน่าเศร้าที่ฉันได้อ่านสิ่งนี้)

— Nick Rice

6

parseInt ผิดปกติเช่น scanf:

parseInt ("12 ลิง", 10) เป็นตัวเลขที่มีค่า '12'
+ "12 ลิง" เป็นตัวเลขที่มีค่า "NaN"
Number ("ลิง 12 ตัว") คือตัวเลขที่มีค่า "NaN"

— แซนเดอร์
แหล่งที่มา

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
แหล่งที่มา

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

— Kshitiz
แหล่งที่มา

0

เราสามารถทำได้โดยใช้ตัวดำเนินการ unary plusเพื่อแปลงเป็นตัวเลขก่อนแล้วเพิ่ม ดูด้านล่าง: -

var a = "4";
var b = "7";
var sum = +a + +b;

— singhkumarhemant
แหล่งที่มา