如何串联。 （点）在javascript中带有数字

Posted 2023-02-23

【中文标题】如何串联。 （点）在javascript中带有数字

【英文标题】：How to concatenate . (dot) with number in javascript

【发布时间】：2020-12-03 06:02:08

【问题描述】：

我使用 html 创建了可视化计算 它看起来像这样..

| 1  | 2  | 3 | 
| 4  | 5  | 6 | 
| 7  | 8  | 9 | 
|    | .  |   |

我在点击每个 html 元素时创建了名为 number() 的函数 就是这样

number(number)

    this.total_quantity_discount_price = this.total_quantity_discount_price+''+number;
    this.total_quantity_discount_price = parseFloat(this.total_quantity_discount_price);
,

数字 0123456789 一切正常，但我对 . 的问题我如何将 . 添加到 this.total_quantity_discount_price 我的意思是如何添加数字 10.555 或 55.648 等.. 谢谢..

【参考方案1】：

使用Number 构造函数，如

this.total_quantity_discount_price = Number(this.total_quantity_discount_price+''+number);

let n=Number(4+'.'+5)
// the n is a number which you could add it to another
console.log(n)
console.log(n+1)
console.log(n-3)

【参考方案2】：

您可以像这样使用+ 运算符：

const n = '4' + '.' + '3' + '4';

console.log(+n);
console.log(+n + 1);
console.log(+n - 1);

你的函数会变成这样：

function number(number)
  this.total_quantity_discount_price = +(this.total_quantity_discount_price + '' + number);

【参考方案3】：

您可以将所有内容连接在一起并使用new Function()解析它

let result = "";
let calc = document.getElementById("calculation");
let output = document.getElementById("result");
document.querySelectorAll("button").forEach(el => 
   el.addEventListener("click", ()=> 
      result += el.innerHTML;
      output.innerHTML = result;
   )
)


function render() 
   let calcResult = interprete(result);
   output.innerHTML = calcResult;


function getResult() 
   output.innerHTML = interprete(result);


function clearResult() 
   output.innerHTML = "";
   result = "";

function back () 
   result = result.slice(0, -1);
   output.innerHTML = result;

function interprete(str) 
   return new Function(`return $str`)()

.buttonholder 
   display: flex;
   flex-flow: wrap;
   width: 170px;


button 
   display: block;
   margin: 2px;
   padding: 15px;


.box 
   cursor: pointer;
   background: black;
   color: white;
   padding: 10px;
   margin: 10px;


#result 
   background: green;
   color: white;
   padding: 10px;

<div class="buttonholder">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>.</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
</div>
<div class="box" onclick="back()"> <== </div>
<p id="result"></p>
<div class="box" onclick="getResult()">=</div>
<p id="calculation"></p>
<div class="box" onclick="clearResult()">Clear</div>