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

JavaScript Type Conversion — एक type से दूसरा type

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

English हिंदी

JavaScript While Loop — जब तक वाला लूप JavaScript Errors — try, catch, finally से error पकड़िए

JavaScript एक ढीली भाषा है। एक value एक मिनट number हो सकती है और अगले मिनट string, और JavaScript उसे आपके लिए खुशी से बदल देगा — कभी-कभी तब भी, जब आपने कहा ही नहीं। इसे type conversion कहते हैं। आपको इसकी ज़रूरत हर समय पड़ती है, क्योंकि values का सबसे आम स्रोत — वेब पेज पर form — हमेशा strings देता है, चाहे user number ही क्यों न लिखे।

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

Diagram: type conversion — एक type से दूसरा type

चाय की दुकान के order form की तरह सोचिए। ग्राहक quantity वाले box में 3 लिखता है। JavaScript उसे string "3" के रूप में पढ़ता है, number 3 के रूप में नहीं। अगर आप "3" + 1 जोड़ेंगे, तो आपको "31" मिलेगा — string और number चिपक गए। अगर आप पहले Number("3") से बदलेंगे, तो आपको 3 + 1 = 4 मिलेगा, जो जवाब आप चाहते थे। एक छोटा conversion, एक बड़ा फर्क।

जानबूझकर बदलना — Number, String, Boolean

JavaScript आपको type जानबूझकर बदलने के तीन आसान औज़ार देता है:

Number("42") string को number बनाता है: 42। Number("hello") number नहीं बन सकता, इसलिए वह NaN देता है — 'Not a Number'। Number("") 0 देता है, और Number(true) 1 देता है।
String(42) number को string बनाता है: "42"। String(true) "true" देता है। आप इसे तब इस्तेमाल करते हैं, जब आप किसी value को message में जोड़ना चाहते हैं।
Boolean(1) true देता है। Boolean(0), Boolean(""), Boolean(null) और Boolean(undefined) सब false देते हैं — ये falsy values हैं। बाकी सब truthy है, string "0" और खाली array [] भी।

आप shortcuts भी इस्तेमाल कर सकते हैं: +"42" (सामने plus sign) Number("42") जैसा काम करता है, और "" + 42 String(42) जैसा काम करता है। ये छोटे हैं, पर beginner के लिए नाम वाले functions साफ़ हैं — shortcuts तब तक इस्तेमाल मत कीजिए, जब तक वे अपने आप सहज न लगने लगें।

Note: NaN अजीब है: यह किसी भी चीज़ के बराबर नहीं है, खुद के भी नहीं। NaN === NaN false है। यह जाँचने के लिए कि कोई value NaN है या नहीं, Number.isNaN(value) इस्तेमाल कीजिए — उसे === से कभी मत जाँचिए।

== बनाम === — interview तय करने वाला सवाल

JavaScript में बराबरी के दो चिह्न हैं, और वे एक जैसे नहीं हैं। == (loose equality) पहले types बदलता है, फिर तुलना करता है: "5" == 5 true है, क्योंकि string "5" number 5 बन जाती है। === (strict equality) type और value दोनों जाँचता है, बिना बदले: "5" === 5 false है, क्योंकि string number नहीं है।

हमेशा === इस्तेमाल कीजिए, जब तक आपके पास साफ़ वजह न हो। Loose equality bugs छिपाता है — एक string जो number जैसी दिखती है, वह ऐसी जाँच पास कर जाती है जो उसे fail करनी चाहिए, और गलती उस जगह से बहुत दूर दिखती है जहाँ वह हुई थी। यही नियम != और !== पर भी लागू होता है: !== को पसंद कीजिए।

Tip: ऐसे याद रखिए: === चेहरा AND नाम दोनों जाँचता है — type और value दोनों। == सिर्फ चेहरा जाँचता है और नाम को जाने देता है। असली code और interviews में === ही सुरक्षित जवाब है।

Truthy और falsy — याद रखने वाली छोटी सूची

जब JavaScript को true/false जवाब चाहिए होता है — मिसाल के लिए if के अंदर — तो वह value को Boolean नियमों से बदलता है। सिर्फ छह values falsy हैं: false, 0, "" (खाली string), null, undefined, और NaN। बाकी सब truthy है। इसका मतलब है if ("hello") चलता है, if (0) नहीं चलता, और if ("0") चलता है — क्योंकि "0" खाली नहीं है, और खाली न होने वाली strings truthy हैं।

यह defaults के लिए काम आता है। let name = input || "Guest"; तब "Guest" देता है, जब input खाली होता है, क्योंकि खाली string falsy है और || अगली value पर चला जाता है। यह pattern आपको असली code में हर जगह मिलेगा।

आम गलतियाँ

Form की value बिना बदले जोड़ना — "3" + 1 "31" है, 4 नहीं। पहले Number() से बदलिए।
== इस्तेमाल करना और हैरान होना कि "5" == 5 true क्यों है — === इस्तेमाल कीजिए, जब तक आपको सच में conversion न चाहिए हो।
value === NaN जाँचना — यह हमेशा false है। Number.isNaN(value) इस्तेमाल कीजिए।
यह सोचना कि "0" falsy है — यह खाली न होने वाली string है, इसलिए truthy है। सिर्फ खाली string "" falsy है।
Number("42px") पर भरोसा करना — यह NaN देता है। parseInt("42px") 42 देता है, क्योंकि यह शुरू का number पढ़ता है और अक्षरों पर रुक जाता है।

याद रखें

Number(), String() और Boolean() value को जानबूझकर बदलते हैं।
=== type AND value जाँचता है; == पहले बदलता है। === को पसंद कीजिए।
सिर्फ छह values falsy हैं: false, 0, "", null, undefined, NaN।
Form inputs हमेशा strings होते हैं — गणित करने से पहले उन्हें बदलिए।
=== चेहरा AND नाम दोनों जाँचता है — type और value दोनों।

उदाहरण समझिए

<input id="qty" value="3"> — quantity वाला box। User कुछ भी लिखे, JavaScript उसे string के रूप में पढ़ता है।
let qty = Number(document.getElementById("qty").value); — string "3" को number 3 में बदलता है, ताकि गणित काम करे।
let total = qty * 10; — ₹10 के हिसाब से 3 कप का ₹30 होता है। गुणा string को खुद ही बदल देता, पर जोड़ नहीं बदलता — इसलिए पहले बदलने से हर operation सुरक्षित रहता है।
if (qty === 0) — strict equality: अगर user ने 0 लिखा, तो number 0 मेल खाता है, पर string "0" बदलने से पहले मेल नहीं खाता।
document.getElementById("out").textContent = "Total: ₹" + total; — जवाब पेज पर दिखाता है। यहाँ + जानबूझकर strings जोड़ता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Chai Bill — Type Conversion</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 340px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
#out { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Chai Bill</h1>
<div class="card">
<p>How many cups? <input id="qty" type="text" value="3"></p>
<p><button onclick="makeBill()">Make my bill</button></p>
<p id="out">Your total will appear here.</p>
<p>Try it: type 3 and click the button — the total is ₹30, not "31".</p>
</div>

<script>
function makeBill() {
  let qty = Number(document.getElementById("qty").value);
  let total = qty * 10;
  if (qty === 0) {
    document.getElementById("out").textContent = "You ordered 0 cups — nothing to pay!";
  } else {
    document.getElementById("out").textContent = "Total: ₹" + total;
  }
}
</script>

</body>
</html>

परिणाम

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Chai Bill — Type Conversion</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 340px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
#out { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Chai Bill</h1>
<div class="card">
<p>How many cups? <input id="qty" type="text" value="3"></p>
<p><button onclick="makeBill()">Make my bill</button></p>
<p id="out">Your total will appear here.</p>
<p>Try it: type 3 and click the button — the total is ₹30, not "31".</p>
</div>

</body>
</html>

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

परिणाम

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

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