แปลง NaN เป็น 0 ใน javascript

มีวิธีการแปลงค่า NaN เป็น 0 โดยไม่มีคำสั่ง if:

if (isNaN(a)) a = 0;

มันน่ารำคาญมากที่ตรวจสอบตัวแปรของฉันทุกครั้ง

คุณสามารถทำได้:

a = a || 0

... ซึ่งจะแปลงค่าจาก "falsey" เป็น 0มูลค่าให้กับ

ค่า "falsey" คือ:

• false
• null
• undefined
• 0
• "" ^{(สตริงว่าง)}
• NaN ^{(ไม่ใช่ตัวเลข)}

หรือสิ่งนี้หากคุณต้องการ:

a = a ? a : 0;

... ซึ่งจะมีผลเช่นเดียวกับข้างต้น

ถ้าเจตนาคือการทดสอบมากกว่าแค่NaNนั้นคุณสามารถทำเช่นเดียวกัน แต่ทำtoNumberแปลงแรก

a = +a || 0

ใช้ตัวดำเนินการ unary + เพื่อลองแปลงaเป็นตัวเลข สิ่งนี้มีประโยชน์เพิ่มเติมของการแปลงสิ่งต่าง ๆ เช่นสตริงตัวเลข'123'ให้เป็นตัวเลข

สิ่งที่ไม่คาดคิดอาจเกิดขึ้นได้ก็ต่อเมื่อมีคนผ่าน Array ที่สามารถแปลงเป็นตัวเลขได้สำเร็จ:

+['123']  // 123

ที่นี่เรามีอาเรย์ที่มีสมาชิกเดียวนั่นคือสตริงตัวเลข มันจะถูกแปลงเป็นตัวเลขได้สำเร็จ

การใช้ตัวหนอนสองตัว (ไม่ใช้สองบิต) - ~~- ทำสิ่งที่น่าสนใจใน JavaScript ตัวอย่างเช่นคุณสามารถใช้มันแทนMath.floorหรือแม้กระทั่งเป็นทางเลือกparseInt("123", 10)! มีการพูดคุยกันมากมายผ่านเว็บดังนั้นฉันจะไม่อธิบายว่าทำไมมันจึงทำงานที่นี่ แต่ถ้าคุณสนใจ: ตัวดำเนินการ "double tilde" (~~) ใน JavaScript คืออะไร

เราสามารถใช้ประโยชน์จากคุณสมบัติของตัวหนอนสองตัวเพื่อแปลงNaNเป็นตัวเลขและอย่างมีความสุขที่หมายเลขนั้นเป็นศูนย์!

console.log(~~NaN); // 0

เขียนวิธีการของคุณเองและใช้ทุกที่ที่คุณต้องการค่าตัวเลข:

function getNum(val) {
   if (isNaN(val)) {
     return 0;
   }
   return val;
}

สิ่งที่ง่ายและมีประสิทธิภาพสำหรับทุกสิ่ง:

function getNum(val) {
   val = +val || 0
   return val;
}

... ซึ่งจะแปลงจาก "falsey" 0มูลค่าให้กับ

ค่า "falsey" คือ:

• false
• null
• undefined
• 0
• "" ^{(สตริงว่าง)}
• NaN ^{(ไม่ใช่ตัวเลข)}

แทนที่จะขุดมันเพื่อให้คุณสามารถทำต่อไปทำไมไม่สำรองข้อมูลและสงสัยว่าทำไมคุณถึงพบ NaN ตั้งแต่แรก?

หากอินพุตตัวเลขใด ๆ ในการดำเนินการเป็น NaN เอาต์พุตก็จะเป็น NaN เช่นกัน นั่นคือวิธีที่มาตรฐาน IEEE Floating Point ทำงานได้ (ไม่ใช่แค่ Javascript) พฤติกรรมนั้นมีเหตุผลที่ดี : ความตั้งใจพื้นฐานคือการป้องกันไม่ให้คุณใช้ผลลัพธ์ปลอมโดยไม่ทราบว่าเป็นการหลอกลวง

วิธีน่านทำงานคือถ้าสิ่งที่ไปลงผิดวิธีในบางย่อยย่อยการดำเนินงาน (การผลิตน่านที่ที่ระดับที่ต่ำกว่า) ผลสุดท้ายจะยังเป็นน่านที่คุณจะรับรู้ได้ทันทีว่าเป็นข้อผิดพลาดแม้ว่าคุณ ข้อผิดพลาดในการจัดการตรรกะ (โยน / จับอาจจะ?) ยังไม่เสร็จสมบูรณ์

NaN เนื่องจากผลลัพธ์ของการคำนวณเลขคณิตเสมอแสดงว่ามีบางสิ่งผิดพลาดในรายละเอียดของเลขคณิต เป็นวิธีที่คอมพิวเตอร์จะพูดว่า "จำเป็นต้องแก้ไขจุดบกพร่องที่นี่" แทนที่จะค้นหาวิธีที่จะดำเนินการต่อด้วยหมายเลขที่ไม่ถูกต้อง (คือ 0 จริงๆสิ่งที่คุณต้องการ?) ทำไมไม่หาปัญหาและแก้ไข

ปัญหาที่พบบ่อยใน Javascript คือทั้งสองอย่างparseInt(...)และparseFloat(...)จะคืน NaN หากได้รับการโต้แย้งที่ไร้สาระ ( null,''ฯลฯ ) แก้ไขปัญหาในระดับต่ำสุดที่เป็นไปได้แทนที่จะเป็นในระดับที่สูงขึ้น จากนั้นผลลัพธ์ของการคำนวณโดยรวมมีโอกาสที่ดีที่จะทำให้เกิดความรู้สึกและคุณไม่ได้แทนที่หมายเลขเวทย์มนตร์ (0 หรือ 1 หรืออะไรก็ตาม) สำหรับผลลัพธ์ของการคำนวณทั้งหมด (เคล็ดลับของ (parseInt (foo.value) || 0) ใช้งานได้เฉพาะกับผลรวมไม่ใช่ผลิตภัณฑ์ - สำหรับผลิตภัณฑ์ที่คุณต้องการให้ค่าเริ่มต้นเป็น 1 แทนที่จะเป็น 0 แต่ไม่ใช่ถ้าค่าที่ระบุคือ 0 จริง ๆ )

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

function getFoobarFromUser(elementid) {
        var foobar = parseFloat(document.getElementById(elementid).innerHTML)
        if (isNaN(foobar)) foobar = 3.21;       // default value
        return(foobar.toFixed(2));
}

แล้วregexล่ะ?

function getNum(str) {
  return /[-+]?[0-9]*\.?[0-9]+/.test(str)?parseFloat(str):0;
}

รหัสด้านล่างจะไม่สนใจ NaN เพื่อให้สามารถคำนวณตัวเลขที่ป้อนอย่างถูกต้อง

function getNum(str) {
  return /[-+]?[0-9]*\.?[0-9]+/.test(str)?parseFloat(str):0;
}
var inputsArray = document.getElementsByTagName('input');

function computeTotal() {
  var tot = 0;
  tot += getNum(inputsArray[0].value);
  tot += getNum(inputsArray[1].value);
  tot += getNum(inputsArray[2].value);
  inputsArray[3].value = tot;
}

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text" disabled></input>
<button type="button" onclick="computeTotal()">Calculate</button>

วิธีการที่ใช้ isNaN ไม่ทำงานหากคุณพยายามใช้ parseInt ตัวอย่างเช่น:

parseInt("abc"); // NaN
parseInt(""); // NaN
parseInt("14px"); // 14

แต่ในกรณีที่สอง isNaN จะสร้าง false (เช่นสตริง null เป็นตัวเลข)

n="abc"; isNaN(n) ? 0 : parseInt(n); // 0
n=""; isNaN(n) ? 0: parseInt(n); // NaN
n="14px"; isNaN(n) ? 0 : parseInt(n); // 14

โดยสรุปสตริงว่างถือเป็นตัวเลขที่ถูกต้องโดย isNaN แต่ไม่ใช่โดย parseInt ตรวจสอบกับ Safari, Firefox และ Chrome บน OSX Mojave

var i = [NaN, 1,2,3];

var j = i.map(i =>{ return isNaN(i) ? 0 : i});

console.log(j)

[0,1,2,3]

ใช้ผู้ใช้โซลูชัน 113716 ซึ่งเป็นวิธีที่ดีในการหลีกเลี่ยงสิ่งที่ฉันได้นำไปใช้ในการคำนวณช่องผลรวมย่อยของฉันจากหน่วยข้อความและปริมาณกล่องข้อความ

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

     <script src="/common/tools/jquery-1.10.2.js"></script>
     <script src="/common/tools/jquery-ui.js"></script>

     <!----------------- link above 2 lines to your jquery files ------>





    <script type="text/javascript" >
    function calculate_subtotal(){

    $('#quantity').val((+$('#quantity').val() || 0));
    $('#unit').val((+$('#unit').val() || 0));

    var  calculated = $('#quantity').val() * $('#unit').val() ;
    $('#subtotal').val(calculated);


    }
    </script>


      <input type = "text" onChange ="calculate_subtotal();" id = "quantity"/>
      <input type = "text" onChange ="calculate_subtotal();" id = "unit"/>
      <input type = "text" id = "subtotal"/>

โปรดลองฟังก์ชั่นที่เรียบง่ายนี้

var NanValue = function (entry) {
    if(entry=="NaN") {
        return 0.00;
    } else {
        return entry;
    }
}