วิธีบังคับให้ JS ทำคณิตศาสตร์แทนที่จะรวมสองสตริงเข้าด้วยกัน


102

ฉันต้องการ javascript เพื่อเพิ่ม 5 ให้กับตัวแปรจำนวนเต็ม แต่จะถือว่าตัวแปรเป็นสตริงแทนดังนั้นจึงเขียนตัวแปรออกมาจากนั้นเพิ่ม 5 ต่อท้าย "สตริง" ฉันจะบังคับให้ทำคณิตศาสตร์แทนได้อย่างไร

var dots = document.getElementById("txt").value; // 5
function increase(){
    dots = dots + 5;
}

เอาท์พุต: 55

ฉันจะบังคับให้ส่งออกได้10อย่างไร


3
ตัวอย่างเฉพาะนี้แสดงผล 10.
หลอกลวง


10
คุณได้วางภาระที่ไม่เหมาะสมให้กับผู้ที่ต้องการช่วยเหลือคุณโดยการทิ้งโค้ดทั้งหมดของคุณโดยไม่ต้องพยายามลดทอน ทดสอบด้วยตัวคุณเอง ... ทำแอตทริบิวต์ CSS เพื่อ#controlสร้างความแตกต่างให้กับปัญหาของคุณหรือไม่? ถ้าไม่เช่นนั้นให้ลบออกและอย่าแสดงให้เราเห็น ลดรหัสของคุณต่อไปจนกว่าคุณจะมีกรณีทดสอบขั้นต่ำที่จำเป็นในการทำให้เกิดปัญหาอีกครั้ง เวลาส่วนใหญ่จะทำให้คุณพบปัญหาและเรียนรู้ในกระบวนการ หากคุณไม่แก้ปัญหาด้วยตัวเองแสดงว่าคุณมีแนวโน้มที่จะได้รับความช่วยเหลืออย่างรวดเร็วจากตัวอย่างง่ายๆของคุณ
Phrogz

คำตอบ:


108

คุณมีสาย

dots = document.getElementById("txt").value;

ในไฟล์ของคุณสิ่งนี้จะกำหนดจุดให้เป็นสตริงเนื่องจากเนื้อหาของ txt ไม่ได้ จำกัด ไว้ที่ตัวเลข

ในการแปลงเป็น int ให้เปลี่ยนบรรทัดเป็น:

dots = parseInt(document.getElementById("txt").value, 10);

หมายเหตุ: 10ที่นี่ระบุทศนิยม (ฐาน -10) หากไม่มีสิ่งนี้เบราว์เซอร์บางตัวอาจตีความสตริงไม่ถูกต้อง ดู parseIntMDN:


3
ทางลัด ... dots = + document.getElementById ("txt") ค่า
Tracker1

5
parseInt (... , 10) ด้วยเสมอใช้ radix ... ตรวจสอบความมีสติ ... ถ้า (! dots || จุด <1) อาจอยู่ในลำดับด้วย ...
Tracker1

1
ควรใช้ตัวดำเนินการเพิ่มสำหรับการเพิ่ม เช่น VARIABLE ++ แทน VAR = VAR + 1;
gnganapath



9

ฉันกำลังเพิ่มคำตอบนี้เพราะฉันไม่เห็นที่นี่

วิธีหนึ่งคือใส่อักขระ "+" ไว้ข้างหน้าค่า

ตัวอย่าง:

var x = +'11.5' + +'3.5'

x === 15

ฉันพบว่านี่เป็นวิธีที่ง่ายที่สุด

ในกรณีนี้บรรทัด:

dots = document.getElementById("txt").value;

สามารถเปลี่ยนเป็น

dots = +(document.getElementById("txt").value);

เพื่อบังคับให้เป็นตัวเลข

บันทึก:

+'' === 0
+[] === 0
+[5] === 5
+['5'] === 5

8

parseInt() ควรทำเคล็ดลับ

var number = "25";
var sum = parseInt(number, 10) + 10;
var pin = number + 10;

ให้คุณ

sum == 35
pin == "2510"

http://www.w3schools.com/jsref/jsref_parseint.asp

หมายเหตุ: 10ในparseInt(number, 10)ระบุทศนิยม (ฐาน -10) หากไม่มีสิ่งนี้เบราว์เซอร์บางตัวอาจตีความสตริงไม่ถูกต้อง ดู parseIntMDN:



1

มันง่ายจริงๆ

var total = (1 * yourFirstVariablehere) + (1 * yourSecondVariablehere)

สิ่งนี้บังคับให้ javascript ทวีคูณเนื่องจากไม่มีความสับสนสำหรับ * sign in javascript



1

หลังจากลองใช้คำตอบส่วนใหญ่ที่นี่โดยไม่ประสบความสำเร็จในกรณีเฉพาะของฉันฉันก็ได้สิ่งนี้:

dots = -(-dots - 5);

เครื่องหมาย + คือสิ่งที่ทำให้ js สับสนและสิ่งนี้จะกำจัดพวกมันทั้งหมด ใช้งานง่ายหากอาจทำให้เข้าใจสับสน


-3

อัปเดตเนื่องจากมีการโหวตครั้งสุดท้าย ....

ฉันเห็นเฉพาะส่วน

var dots = 5
function increase(){
    dots = dots+5;
}

ก่อน แต่ต่อมาก็แสดงให้เห็นว่าผมว่ากล่องฟีดตัวแปรtxt dotsด้วยเหตุนี้คุณจะต้องแน่ใจว่าได้ "ล้างข้อมูล" อินพุตเพื่อให้แน่ใจว่ามีเฉพาะจำนวนเต็มไม่ใช่โค้ดที่เป็นอันตราย

วิธีง่ายๆวิธีหนึ่งในการทำเช่นนี้คือการแยกวิเคราะห์กล่องข้อความด้วยonkeyup()เหตุการณ์เพื่อให้แน่ใจว่ามีอักขระตัวเลข:

<input size="40" id="txt" value="Write a character here!" onkeyup="GetChar (event);"/>

โดยที่เหตุการณ์จะให้ข้อผิดพลาดและล้างอักขระสุดท้ายหากค่าไม่ใช่ตัวเลข:

<script type="text/javascript">
    function GetChar (event){
        var keyCode = ('which' in event) ? event.which : event.keyCode;
        var yourChar = String.fromCharCode();
        if (yourChar != "0" &&
            yourChar != "1" &&
            yourChar != "2" &&
            yourChar != "3" && 
            yourChar != "4" &&
            yourChar != "5" &&
            yourChar != "6" && 
            yourChar != "7" &&
            yourChar != "8" && 
            yourChar != "9")
        {
            alert ('The character was not a number');
            var source = event.target || event.srcElement;
            source.value = source.value.substring(0,source.value-2);
        }
    }
</script>

เห็นได้ชัดว่าคุณสามารถทำเช่นนั้นกับ regex ได้เช่นกัน แต่ฉันใช้วิธีขี้เกียจออกไป

ตั้งแต่นั้นมาคุณจะรู้ว่ามีเพียงตัวเลขเท่านั้นในกล่องคุณควรจะสามารถใช้eval():

dots = eval(dots) + 5;

2
eval()เป็นอันตรายหากdotsมาจากอินพุตของผู้ใช้โดยเฉพาะอย่างยิ่งหากมาจากอินพุตที่จัดเก็บไว้ ข้อมูลเพิ่มเติม
Chad Levy

@ChadLevy ขอบคุณสำหรับลิงค์ - การอ่านที่ดี - และนำสิ่งนี้มาใช้ แต่ในกรณีนี้ข้อกังวลนั้นไม่ได้รับการรับรองเนื่องจากไม่ได้มาจากการป้อนข้อมูลของผู้ใช้ dotsเป็นตัวแปรที่กำหนดไว้ซึ่งเพิ่มขึ้นและถูกเข้าใจผิดว่าเป็นสตริง ดังนั้นฉันจะรับรองคำตอบของฉันว่าไม่ควรใช้เบา ๆ อย่างที่คุณพูดจากอินพุตของผู้ใช้ / ที่เก็บไว้ซึ่งอาจมีโอกาสเกิดการแทรกสคริปต์ชั่วร้าย แต่ในกรณีนี้การฉีดดังกล่าวจะทำให้เกิดข้อผิดพลาด / ข้อยกเว้นทางคณิตศาสตร์ดังนั้นมันจะไม่ทำอะไรเลยไม่ว่าจะด้วยวิธีใดก็ตาม
vapcguy

สำหรับการลงคะแนนเหล่านั้นเนื่องจากคุณคิดว่าeval()อันตรายมากคุณต้องดูรหัสในบริบทที่ OP ใช้ ไม่ใช่ในกรณีนี้เนื่องจากเขาใช้อินพุตที่ไม่ได้มาจากกล่องข้อความหรือรูปแบบอื่น ๆ ของการป้อนข้อมูลของผู้ใช้ซึ่งอาจมีการแทรกค่าที่ไม่ใช่ตัวเลขในรูปแบบใดก็ได้! ฉันหวังว่าฉันจะสามารถโหวตลดคะแนนของคุณได้!
vapcguy

ผู้ลงคะแนนอีกราย สนใจที่จะอธิบายตัวเองแทนที่จะเป็นแกะ? มีหลายครั้งที่ใช้ได้eval()ดีและคุณต้องดูบริบทที่ใช้แทนการเชื่อทุกสิ่งที่คุณอ่านโดยสุ่มสี่สุ่มห้าโดยที่ไม่เข้าใจจริงๆ!
vapcguy

1
@ChadLevy ตกลงในจำนวนนั้นคุณพูดถูก ฉันไม่ได้ดูส่วนนั้น - ฉันมุ่งเน้นไปที่สิ่งที่เขาวางไว้ที่ด้านบนสุดของหน้า: รหัสvar dots = 5 function increase(){ dots = dots+5; }ไม่ใช้ช่องข้อความและกำหนดโดยใช้ตัวแปรโดยตรงไม่ใช่จากการป้อนข้อมูลของผู้ใช้ นั่นคือสิ่งที่ฉันออกไป แต่ฉันเห็นว่าคุณคิดถูกแล้วที่เขากำหนดช่องข้อความนั้นtxtให้dotsและdotsเป็นตัวแปรสากลดังนั้นจึงได้รับการอัปเดตจากอินพุตนั้น คุณถูก. ขอบคุณ.
vapcguy
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.