数字のように2つの文字列を追加するにはどうすればよいですか?


176

数字のみを含む2つの文字列があります。

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

それらを一緒に追加できると期待していましたが、代わりに連結されています。

num1 + num2; // = '2030.5'

これらの文字列を数値として処理させるにはどうすればよいですか?

回答:


378

まず、単項プラス演算子を使用して、それらを数値に変換します。

+num1 + +num2;

9
とてもかっこいい。これを共有してくれてありがとう。単項プラス演算子と、それがさまざまなデータ型に及ぼすいくつかの有用な影響について説明しているこの記事を見つけました。xkr.us/articles/javascript/unary-add
mrtsherman

4
ただし、これらの数値が2 ^ 53より大きい場合は、文字列の一部を追加する関数を作成し、ループ内の各部分にキャリーを引き継ぐ必要があります。:D
trusktr 2014

2
これによりエラーが発生したため、代わりにparseFloat()を使用しました。
Hawkee 2015

1
以下の@NicholasCareyの回答も参照してください:stackoverflow.com/a/8976770/1579667
Benj

これを行うためのハックの少ない方法はありますか?(免責事項:これは私がいつもそうしてきた方法です。)
seebiscuit

20

parseIntの
MDNドキュメントparseFloatのMDNドキュメント

parseIntでは、基数は10として指定されているので、基数は10になります。非厳密なJavaScriptでは、先頭に付加される数値0は8進数として扱われます。これは明らかに問題を引き起こします!

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
また、あなたは本当に10として基数を指定する必要があります
ChaosPandion

そして+num1 + +num2短く、間違いなくよりエレガントです。基本的に単項+演算子は次のように変換されますNumber
Raynos

parseIntを実行すると、小数点以下.5が失われませんか?
2012年

価値があるのは、parseIntとparseFloatは実験的なものであり、ブラウザ間で広くサポートされていないため、モバイルではほとんどサポートされていません。
2014

14

次のようにコードを読みやすくするために、括弧内で最終的な文字列を強制的に数値として扱うには、単項プラス演算子を使用することをお勧めします。

(+varname)

したがって、あなたの場合はそれです:

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

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

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



6

非常に大きな数である2つの文字列を一緒に追加する必要がある場合は、すべての文字列位置で追加を評価する必要があります。

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

Douglas Crockford 著の「Javascript:The Good Parts」という本を手に入れたいかもしれません。Javascriptにはかなり大きな問題があります。この本はそれらを明らかにするのに大いに役立ちます。こちらもご覧ください

そして、クロックフォード氏の優れたエッセイ、Javascript:世界で最も誤解されているプログラミング言語


3

私は常にゼロを差し引いてきました。

num1-0 + num2-0;

単項演算子のメソッドのほうが1文字少ないことは確かですが、誰もが単項演算子とは何か、またはどのように呼び出されているのかわからないときにgoogleを見つける方法を知っているわけではありません。


2

数値を文字列として操作を実行する場合(64ビットが保持できる数値よりも大きい場合など)、big-integerライブラリを使用できます。

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

2

ここでは、これを行うための2つのオプションがあります。

1.単項プラスを使用して、文字列番号を整数に変換できます。

2.数値を対応する型に解析することでこれを実現することもできます。つまり、parseInt()、parseFloat()など

ここで、例を使用してここで紹介します(2つの数値の合計を見つけます)。

単項プラス演算子の使用

<!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、base 2で解析する2番目の引数として常に渡します。

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

1

Javaスクリプトはバグが多いため、最終回答を浮動小数点数の小数点以下16桁未満に丸めるようにしてください。

例5-7.6 = -2.5999999999999996


1
JavaScriptはバグがなく、他のほとんどすべてと同じIEEE754浮動小数点を使用します。指摘した不正確さは、指定して10進数で表示する数値に2進浮動小数点演算を使用した場合の自然な結果です。
Michael Geary 2013

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

num1に* 1を適用すると、文字列を数値に変換します。

num1に文字またはコンマが含まれている場合、1を乗算したNaNを返します

num1がnullの場合、num1は0を返します

敬具!!!


-2

単純なJavascriptコードを探していて、2つの入力ボックスを使用して、2つの値から数値を追加したい場合は、これを試してください。これがコードです。

    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.