วิธีการเพิ่มสองสายราวกับว่าพวกเขาเป็นตัวเลข?


176

ฉันมีสองสายที่มีตัวเลขเท่านั้น:

var num1 = '20',
    num2 = '30.5';

ฉันคาดหวังว่าฉันจะเพิ่มพวกเขาเข้าด้วยกัน แต่พวกเขากำลังถูกต่อกันแทน:

num1 + num2; // = '2030.5'

ฉันจะบังคับให้สตริงเหล่านี้ถือเป็นตัวเลขได้อย่างไร

คำตอบ:


378

ฉันจะใช้ตัวดำเนินการ unary plus เพื่อแปลงเป็นตัวเลขก่อน

+num1 + +num2;

9
เด็ดมาก ขอบคุณที่แบ่งปันสิ่งนี้ ฉันพบบทความนี้ซึ่งอธิบายตัวดำเนินการ unary plus และมีประโยชน์บางอย่างที่มีผลต่อชนิดข้อมูลที่แตกต่างกัน xkr.us/articles/javascript/unary-add
mrtsherman

4
แต่ถ้าตัวเลขเหล่านั้นมีขนาดใหญ่กว่า 2 ^ 53 คุณจะต้องสร้างฟังก์ชั่นเพื่อเพิ่มส่วนต่างๆของสตริงและนำติดตัวไปยังแต่ละส่วนในลูป : D
trusktr

2
สิ่งนี้ทำให้ฉันมีข้อผิดพลาดดังนั้นฉันจึงใช้ parseFloat () แทน
Hawkee

1
ดูได้ที่ @NicholasCarey คำตอบด้านล่าง: stackoverflow.com/a/8976770/1579667
Benj

มีวิธีแฮ็คน้อยกว่าการทำเช่นนี้? (ข้อสงวนสิทธิ์: นี่เป็นวิธีที่ฉันทำมาตลอด)
seebiscuit

20

เอกสาร MDN สำหรับการแยกวิเคราะห์
เอกสาร MDN สำหรับการแยกวิเคราะห์

ใน parseInt radix ถูกระบุเป็นสิบเพื่อให้เราอยู่ในฐาน 10 ในจาวาสคริปต์ที่ไม่ จำกัด จำนวนที่เติมด้วย0จะถือว่าเป็นฐานแปด เห็นได้ชัดว่านี่จะทำให้เกิดปัญหา!

parseInt(num1, 10) + parseInt(num2, 10) //base10
parseFloat(num1) + parseFloat(num2)

ยังเห็นคำตอบ ChaosPandion สำหรับทางลัดที่มีประโยชน์ใช้ประกอบการเอก ฉันได้ตั้งค่าซอเพื่อแสดงพฤติกรรมที่แตกต่าง

http://jsfiddle.net/EtX6G/

var ten = '10';
var zero_ten = '010';
var one = '1';
var body = document.getElementsByTagName('body')[0];

Append(parseInt(ten) + parseInt(one));
Append(parseInt(zero_ten) + parseInt(one));
Append(+ten + +one);
Append(+zero_ten + +one);

function Append(text) {
    body.appendChild(document.createTextNode(text));
    body.appendChild(document.createElement('br'));
}

2
ใช้ parseFloat () ถ้าคุณมีทศนิยม :)
Diodeus - James MacFarlane

1
นอกจากนี้คุณควรระบุ
เลข

และ+num1 + +num2สั้นกว่าเนื้อหาที่สง่างามมากขึ้น โดยทั่วไป+ผู้ประกอบการเอกแปลงเป็นNumber
Raynos

คุณไม่สูญเสียทศนิยม. 5 เมื่อคุณแยกวิเคราะห์
DOK

สำหรับสิ่งที่คุ้มค่า parseInt & parseFloat กำลังทดลองและไม่ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์ - แทบจะไม่รองรับมือถือ
จะ

14

ฉันอยากจะแนะนำให้ใช้ตัวดำเนินการ unary plus เพื่อบังคับให้สตริงในที่สุดให้ถือว่าเป็นตัวเลขในวงเล็บเพื่อให้โค้ดอ่านง่ายขึ้นดังต่อไปนี้:

(+varname)

ดังนั้นในกรณีของคุณมันคือ:

var num1 = '20',
    num2 = '30.5';

var sum = (+num1) + (+num2);

// Just to test it
console.log( sum ); // 50.5



6

หากคุณต้องการเพิ่มสองสายเข้าด้วยกันซึ่งเป็นตัวเลขที่มีขนาดใหญ่มากคุณจะต้องประเมินการเพิ่มในทุกตำแหน่งสตริง:

function addStrings(str1, str2){
  str1a = str1.split('').reverse();
  str2a = str2.split('').reverse();
  let output = '';
  let longer = Math.max(str1.length, str2.length);
  let carry = false;
  for (let i = 0; i < longer; i++) {
    let result
    if (str1a[i] && str2a[i]) {
      result = parseInt(str1a[i]) + parseInt(str2a[i]);

    } else if (str1a[i] && !str2a[i]) {
      result = parseInt(str1a[i]);

    } else if (!str1a[i] && str2a[i]) {
      result = parseInt(str2a[i]);
    }

    if (carry) {
        result += 1;
        carry = false;
    }
    if(result >= 10) {
      carry = true;
      output += result.toString()[1];
    }else {
      output += result.toString();
    }
  }
  output = output.split('').reverse().join('');

  if(carry) {
    output = '1' + output;
  }
  return output;
}


4

ลอง

var x = parseFloat(num1) + parseFloat(num2) ;

หรือขึ้นอยู่กับความต้องการของคุณ:

var x = parseInt(num1) + parseInt(num2) ;

http://www.javascripter.net/faq/convert2.htm

คุณอาจต้องการที่จะรับหนังสือJavascript: The Good Parts , โดย Douglas Crockford Javascript มีผู้รวบรวม gotchas ที่ใหญ่มาก! หนังสือเล่มนี้จะอธิบายไปไกล ดูสิ่งนี้ด้วย

และการเขียนเรียงความที่ดีเยี่ยมนายครอกของJavascript: โลกเข้าใจผิดมากที่สุดโปรแกรมภาษา


3

ฉันจะลบศูนย์เสมอ

num1-0 + num2-0;

ได้รับการยอมรับว่าวิธีการตัวดำเนินการ unary เป็นตัวอักษรที่น้อยกว่า แต่ทุกคนไม่ทราบว่าตัวดำเนินการ unary คืออะไรหรือจะทำอย่างไรให้ google รู้ว่าเมื่อใดที่พวกเขาไม่รู้ว่ามันเรียกว่าอะไร


2

หากคุณต้องการดำเนินการกับตัวเลขเป็นสตริง (เช่นในกรณีที่ตัวเลขมีขนาดใหญ่กว่า 64 บิตสามารถถือได้) คุณสามารถใช้ไลบรารีจำนวนเต็มขนาดใหญ่ได้

const bigInt = require('big-integer')
bigInt("999").add("1").toString() // output: "1000"

2

ที่นี่คุณมีสองตัวเลือกในการทำเช่นนี้: -

1. คุณสามารถใช้ unary plus เพื่อแปลงหมายเลขสตริงเป็นจำนวนเต็ม

2. คุณสามารถทำสิ่งนี้ได้ด้วยการแยกตัวเลขออกเป็นประเภท เช่น parseInt (), parseFloat () ฯลฯ

.

ตอนนี้ฉันจะแสดงให้คุณที่นี่ด้วยความช่วยเหลือของตัวอย่าง (ค้นหาผลรวมของตัวเลขสองจำนวน)

การใช้ตัวดำเนินการ unary plus

<!DOCTYPE html>
<html>
<body>

<H1>Program for sum of two numbers.</H1>
<p id="myId"></p>
<script>
var x = prompt("Please enter the first number.");//prompt will always return string value
var y = prompt("Please enter the second nubmer.");
var z = +x + +y;    
document.getElementById("myId").innerHTML ="Sum of "+x+" and "+y+" is "+z;
</script>
</body>
</html>

ใช้วิธีการแยกวิเคราะห์

<!DOCTYPE html>
<html>
<body>

<H1>Program for sum of two numbers.</H1>
<p id="myId"></p>
<script>
var x = prompt("Please enter the first number.");
var y = prompt("Please enter the second number.");   
var z = parseInt(x) + parseInt(y);
document.getElementById("myId").innerHTML ="Sum of "+x+" and "+y+" is "+z;
</script>
</body>
</html>

2
function sum(){
    var x,y,z;
    x = Number(document.getElementById("input1").value);
    y = Number(document.getElementById("input2").value);
    z = x + y;
    document.getElementById("result").innerHTML = z ;
}

1

คุณสามารถใช้parseIntในการแยกสตริงเป็นตัวเลข เมื่อต้องการอยู่ในด้านที่ปลอดภัยของสิ่งต่าง ๆ ให้ส่งผ่าน10อาร์กิวเมนต์ที่สองเพื่อแยกวิเคราะห์ในฐาน 10 เสมอ

num1 = parseInt(num1, 10);
num2 = parseInt(num2, 10);
alert(num1 + num2);

1

ตรวจสอบให้แน่ใจว่าคุณปัดเศษคำตอบสุดท้ายของคุณให้น้อยกว่า 16 ตำแหน่งทศนิยมสำหรับการลอยเนื่องจากจาวาสคริปต์นั้นเป็นจุดเริ่มต้น

ตัวอย่างเช่น 5 - 7.6 = -2.5999999999999996


1
JavaScript ไม่ได้เป็นรถ แต่ใช้จุดลอยตัว IEEE754 เหมือนกับทุกอย่างส่วนใหญ่ ความไม่แน่นอนที่คุณบันทึกไว้เป็นผลมาจากการใช้เลขคณิตเลขทศนิยมแบบเลขฐานสองกับตัวเลขที่คุณระบุและแสดงเป็นทศนิยม
Michael Geary

1

@ cr05s19xx แนะนำในคำถามที่ซ้ำกัน:

JavaScript ค่อนข้างตลกเมื่อพูดถึงตัวเลขและเพิ่มเติม

ให้ดังต่อไปนี้

'20' - '30' = 10; // คืนค่า 10 เป็นตัวเลข '20' + '30' = '2030'; // คืนค่าเป็นสตริงค่าที่ส่งคืนจาก document.getElementById คือสตริงดังนั้นจึงเป็นการดีกว่าที่จะแยกวิเคราะห์พวกเขาทั้งหมด (แม้แต่ค่าที่ใช้งานได้) เป็นตัวเลขก่อนดำเนินการต่อด้วยการบวกหรือการลบ รหัสของคุณสามารถ:

function myFunction() {
  var per = parseInt(document.getElementById('input1').value);
  var num = parseInt(document.getElementById('input2').value);
  var sum = (num / 100) * per;
  var output = num - sum;

  console.log(output);

  document.getElementById('demo').innerHTML = output;
}

function myFunction2() {
  var per = parseInt(document.getElementById('input3').value);
  var num = parseInt(document.getElementById('input4').value);
  var sum = (num / 100) * per;
  var output = sum + num;

  console.log(output);

  document.getElementById('demo1').innerHTML = output;
}

0

ใช้parseFloatวิธีการแยกสตริงเป็นตัวเลขทศนิยม:

parseFloat(num1) + parseFloat(num2)

0

ฉันใช้สิ่งนี้ในโครงการของฉันฉันใช้เครื่องหมาย + เพื่อจัดการกับสตริงเป็นตัวเลข (ในตัวแปร with_interesst)

<script>
function computeLoan(){
var amount = document.getElementById('amount').value;
var interest_rate = document.getElementById('interest_rate').value;
var days = document.getElementById('days').value;
var interest = (amount * (interest_rate * .01)) / days;
var payment = ((amount / days) + interest).toFixed(2);
var with_interest = (amount * (interest_rate * .01));
var with_interesst = (+amount * (interest_rate * .01)) + (+amount);
payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('payment').innerHTML = "Target Daily = PHP"+payment;
document.getElementById('with_interesst').innerHTML = "Amount w/Interest =   PHP"+with_interesst;
}
</script>

<div name="printchatbox" id="printchatbox">
 <form id="Calculate" class="form-horizontal">
   <h2>You Can Use This Calculator Before Submit </h2>
   <p>Loan Amount: PHP<input id="amount" type="number" min="1" max="1000000"  onchange="computeLoan()"></p>
   <p>Interest Rate: <input id="interest_rate" type="number" min="0" max="100" value="10" step=".1" onchange="computeLoan()">%</p>
    <p>Term<select id="days" type="number" min="1" max="72" step=".1" onchange="computeLoan()">
    <option value="40">40 Days</option>
    <option value="50">50 Days</option>
    <option value="60">60 Days</option>
    <option value="70">70 Days</option>
    <option value="80">80 Days</option>
    <option value="90">90 Days</option>
    <option value="100">100 Days</option>
    <option value="120">120 Days</option>
    </select>
    </p>                        
   <h2 id="payment"></h2>
   <h2 id ="with_interesst"></h2>
 </form>
</div>

หวังว่ามันจะช่วย


0
document.getElementById(currentInputChoosen).value -= +-100;

ใช้งานได้ในกรณีของฉันหากคุณพบปัญหาเดียวกันกับฉันและไม่สามารถหาวิธีแก้ปัญหาสำหรับกรณีนั้นและค้นหาคำถาม SO นี้

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

ไม่ทราบว่าเป็นวิธีแก้ปัญหาที่สกปรกหรือเป็นเรื่องจริง


-1

คุณสามารถใช้สิ่งนี้:

var num1 = '20',
    num2 = '30.5';

alert((num1*1) + (num2*1)); //result 50.5

เมื่อใช้ * 1 ใน num1 ให้แปลงจำนวนสตริง

ถ้า num1 มีตัวอักษรหรือเครื่องหมายจุลภาคส่งคืน NaN คูณด้วย 1

ถ้า num1 เป็นโมฆะ num1 จะคืนค่า 0

ขอแสดงความนับถือ!!!


-2

ลองใช้วิธีนี้หากคุณกำลังมองหารหัส Javascript ที่เรียบง่ายและต้องการใช้ช่องป้อนข้อมูลสองช่องและเพิ่มตัวเลขจากค่าทั้งสอง นี่คือรหัส

    Enter the first number: <input type="text" id="num1" /><br />
    Enter the seccond number: <input type="text" id="num2" /><br />
    <input type="button" onclick="call()" value="Add"/>

    <script type="text/javascript">
    function call(){
    var q=parseInt(document.getElementById("num1").value);
    var w=parseInt(document.getElementById("num2").value);
    var result=q+w;
    }
    </script>

สำหรับรายละเอียดเพิ่มเติมกรุณาเยี่ยมชมhttp://informativejavascript.blogspot.nl/2012/12/javascript-basics.html

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.