पाठ 14, कुल 30 में

JavaScript नंबर्स

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript में नंबर सिर्फ एक तरह का होता है — पूरे नंबर और दशमलव के लिए अलग type नहीं है। 10, 3.14 और -5 सभी सिर्फ नंबर हैं। यह सादगी सुविधाजनक है, लेकिन इसमें कुछ जाल छिपे हैं, और यह पाठ उन्हीं से बचने के बारे में है।

Diagram — देखें, यह सब कैसे जुड़ता है

सबसे बड़ा जाल + का निशान है। दो नंबरों के साथ यह जोड़ता है; पास में कहीं स्ट्रिंग हो, तो यह जोड़ देता है। 10 + 5 है 15, लेकिन "10" + 5 है "105"। फ़ॉर्म के input हमेशा स्ट्रिंग देते हैं, इसलिए जो marks calculator convert करना भूल जाता है, वह खुशी से छात्र को 100 में से 105 नंबर बता देगा।

Text को नंबर में बदलना

जब नंबर फ़ॉर्म या prompt से आता है, तो वह स्ट्रिंग के रूप में आता है। गणित करने से पहले उसे convert करें। parseInt() पूरा नंबर पढ़ता है, parseFloat() दशमलव पढ़ता है, और Number() पूरे मान को एक बार में convert करता है।

parseInt("42");      // 42
parseFloat("3.14");  // 3.14
Number("85");        // 85
Number("");          // 0 — खाली स्ट्रिंग शून्य बन जाती है

अगर text बिल्कुल नंबर ही नहीं है, तो नतीजा NaN होता है — "Not a Number"। parseInt("Rahul") है NaN, और NaN से किया गया कोई भी गणित NaN ही रहता है, जैसे कोई दाग जो छूने वाली हर चीज़ पर फैल जाता है।

isNaN से जाँच

क्योंकि NaN JavaScript की इकलौती value है जो खुद के बराबर नहीं है (NaN === NaN है false), आप इसे === से नहीं जाँच सकते। इसकी जगह isNaN() इस्तेमाल करें — यह बताता है कि कोई मान Not a Number है या नहीं, ताकि गणित गलत होने से पहले आप यूज़र को चेतावनी दे सकें।

isNaN(42);       // false — 42 एक नंबर है
isNaN("Rahul");  // true
isNaN(NaN);      // true

Note: पुराना global isNaN() पहले अपने argument को नंबर में बदलता है, इसलिए isNaN("42") है false — स्ट्रिंग "42" पहले नंबर 42 बन जाती है। सख्त Number.isNaN() कोई convert नहीं करता: Number.isNaN("42") भी false है, लेकिन उल्टी वजह से — "42" बस NaN मान ही नहीं है। शुरुआती लोगों के लिए global isNaN() ज़्यादा दोस्ताना है।

toFixed से गोल करना

JavaScript में दशमलव का गणित लंबे, भद्दे नतीजे दे सकता है: 0.1 + 0.2 है 0.30000000000000004, 0.3 नहीं। कंप्यूटर दशमलव को ऐसे ही सहेजता है, और हर भाषा में यही ख़ासियत है। दिखाने के लिए toFixed(n) इस्तेमाल करें — यह नंबर को n दशमलव स्थानों तक गोल करता है और स्ट्रिंग लौटाता है, 87.5% जैसा percentage दिखाने के लिए बिल्कुल सही।

let percent = (85 / 100) * 100;   // 85
(2 / 3).toFixed(2);               // "0.67"
(87.456).toFixed(1);              // "87.5"

Tip: toFixed() नंबर नहीं, स्ट्रिंग लौटाता है। अगर आपको गणना जारी रखनी है, तो उसे Number(...) या parseFloat(...) से वापस convert करें। आम तरीका यह है: नंबरों से गणना करें, और नतीजा दिखाते समय ही आखिर में toFixed() से format करें।

आम गलतियाँ

फ़ॉर्म की values को convert किए बिना जोड़ना — "85" + "10" है "8510", 95 नहीं। पहले Number() से convert करें।
NaN को === से जाँचना — यह कभी match नहीं करता। isNaN() इस्तेमाल करें।
0.1 + 0.2 के बिल्कुल 0.3 होने पर भरोसा करना — यह 0.30000000000000004 है। दिखाने के लिए round करें।
"3.99" जैसी दशमलव वाली स्ट्रिंग पर parseInt() इस्तेमाल करना और .99 खो देना — दशमलव के लिए parseFloat() इस्तेमाल करें।

याद रखें

JavaScript में पूर्णांक और दशमलव, दोनों के लिए एक ही नंबर type है।
parseInt() पूरे नंबर पढ़ता है, parseFloat() दशमलव पढ़ता है, Number() पूरे मान को convert करता है।
NaN का मतलब है "Not a Number"; इसे isNaN() से जाँचें, === से कभी नहीं।
toFixed(n) दिखाने के लिए गोल करता है और स्ट्रिंग लौटाता है।
"10" + 5 है "105", 10 + 5 है 15 — quotes सब कुछ बदल देते हैं।

उदाहरण समझिए

Number(document.getElementById("got").value) — input से आए marks स्ट्रिंग होते हैं, इसलिए कोई भी गणित करने से पहले Number() उन्हें असली नंबर में बदल देता है।
isNaN(got) || isNaN(total) — अगर किसी भी box में ऐसा text है जो नंबर नहीं है, तो फ़ंक्शन गलत जवाब की जगह चेतावनी दिखाता है।
(got / total) * 100 — percentage का फ़ॉर्मूला: प्राप्त अंक भाग कुल अंक, गुणा 100।
percent.toFixed(1) — जवाब को एक दशमलव स्थान तक गोल करता है, ताकि 87.456 दिखे 87.5%।
percent >= 40 ? "Passed" : "Failed" — छोटा if-else (ternary operator): 40 या उससे ज़्यादा पास, उससे कम फेल।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Marks Percentage Calculator</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
label { display: block; margin: 8px 0; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; }
#result { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Marks Percentage Calculator</h1>
<label>Marks obtained: <input type="text" id="got" value="85"></label>
<label>Total marks: <input type="text" id="total" value="100"></label>
<button onclick="calcPercent()">Calculate Percentage</button>
<p id="result">Your percentage will appear here.</p>

<script>
function calcPercent() {
  let got = Number(document.getElementById("got").value);
  let total = Number(document.getElementById("total").value);
  if (isNaN(got) || isNaN(total) || total === 0) {
    document.getElementById("result").innerHTML = "Please enter valid numbers.";
    return;
  }
  let percent = (got / total) * 100;
  let status = percent >= 40 ? "Passed" : "Failed";
  document.getElementById("result").innerHTML = "Percentage: " + percent.toFixed(1) + "% — " + status;
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Marks Percentage Calculator</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
label { display: block; margin: 8px 0; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; }
#result { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Marks Percentage Calculator</h1>
<label>Marks obtained: <input type="text" id="got" value="85"></label>
<label>Total marks: <input type="text" id="total" value="100"></label>
<button onclick="calcPercent()">Calculate Percentage</button>
<p id="result">Your percentage will appear here.</p>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।