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

JavaScript स्ट्रिंग्स

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

English हिंदी

स्ट्रिंग (string) quotes के अंदर लिखा text है — एक नाम, एक संदेश, एक वाक्य। JavaScript आपको स्ट्रिंग्स के साथ काम करने के लिए पूरा toolbox देता है: आप उनके अक्षर गिन सकते हैं, एक टुकड़ा काट सकते हैं, एक शब्द बदल सकते हैं, case बदल सकते हैं, या हिस्सों से नया वाक्य बना सकते हैं। स्ट्रिंग्स किसी भी वेब पेज का सबसे आम डेटा हैं, क्योंकि यूज़र जो कुछ भी टाइप करता या पढ़ता है, वह लगभग सब text ही होता है।

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

स्ट्रिंग को अक्षरों की माला समझें, और हर अक्षर की एक position होती है, जो 0 से शुरू होती है। "Rahul" का पहला अक्षर position 0 पर है, दूसरा position 1 पर, और ऐसे ही आगे। लगभग हर string method position से काम करता है, इसलिए शून्य से गिनना एक आदत है जिसे आपको जल्दी बनाना होगा।

लंबाई और स्थान

length property बताती है कि स्ट्रिंग में कितने अक्षर हैं — space भी गिने जाते हैं। आप bracket notation से एक अक्षर पढ़ सकते हैं, बिल्कुल ऐरे की तरह।

let name = "Rahul Verma";
name.length;   // 11 (space भी गिना जाता है)
name[0];       // "R"
name[6];       // "V"

स्ट्रिंग काटना और बदलना

slice(start, end) एक टुकड़ा काटता है: यह start से शुरू होता है और end से ठीक पहले रुकता है। replace(old, new) किसी शब्द की पहली occurrence को बदल देता है। toUpperCase() और toLowerCase() case बदलते हैं, और trim() दोनों सिरों से space हटा देता है — फ़ॉर्म में यूज़र ने जो कुछ टाइप किया है, उसे साफ़ करने के लिए बहुत काम का है।

let city = "  Varanasi  ";
city.trim();                    // "Varanasi"
"hello world".toUpperCase();    // "HELLO WORLD"
"Ram Kumar".replace("Kumar", "Verma");  // "Ram Verma"
"Rahul Verma".slice(0, 5);      // "Rahul"

याद रखें: स्ट्रिंग्स immutable होती हैं — replace() जैसे मेथड मूल स्ट्रिंग को नहीं बदलते; वे बिल्कुल नई स्ट्रिंग लौटाते हैं। आपको नतीजे को variable में सहेजना होगा, वरना वह खो जाता है।

Note: slice() और substring() एक जैसे दिखते हैं, लेकिन negative numbers के साथ उनका व्यवहार अलग है: slice(-4) आखिरी 4 अक्षर लेता है, जबकि substring(-4) negative को 0 मानता है। शुरुआती लोगों को slice() पर ही टिके रहना चाहिए — उसका व्यवहार ज़्यादा अनुमान लगाने लायक है।

टेम्पलेट लिटरल्स — हिस्सों से वाक्य

+ से स्ट्रिंग्स जोड़ना जल्दी गड़बड़ हो जाता है: "Hello " + name + ", your score is " + marks। टेम्पलेट लिटरल्स (template literals) backtick ( ` वाली key, 1 के बगल में) इस्तेमाल करते हैं और आपको ${ } से मान सीधे वाक्य में डालने देते हैं। वे कई लाइनों में भी फैल सकते हैं, जो सामान्य quotes नहीं कर सकते।

let name = "Priya";
let marks = 92;
let msg = `Hello ${name}, your score is ${marks} / 100.`;
`2 + 3 is ${2 + 3}`;  // "2 + 3 is 5" — ${ } के अंदर गणित भी चलता है

Tip: जब यूज़र फ़ॉर्म में अपना नाम टाइप करे, तो उसे हमेशा trim() करें और पहला अक्षर capital करें: name.trim().charAt(0).toUpperCase() + name.trim().slice(1)। यह " rahul " को "Rahul" बना देता है — एक छोटी सी बात जो आपकी वेबसाइट को professional दिखाती है।

आम गलतियाँ

यह भूल जाना कि स्ट्रिंग्स immutable होती हैं — अकेला city.replace("a", "o") कुछ नहीं करता; आपको city = city.replace("a", "o") लिखना होगा।
Position 1 से गिनना — पहला अक्षर position 0 पर है, इसलिए name[1] दूसरा अक्षर है।
Quotes मिलाना — जो स्ट्रिंग " से शुरू होती है, वह " से ही खत्म होनी चाहिए, ' से नहीं।
${ } के लिए सामान्य quotes इस्तेमाल करना — placeholder सिर्फ backtick के अंदर काम करता है, " या ' के अंदर नहीं।

याद रखें

length अक्षर गिनता है, space भी; position 0 से शुरू होती है।
slice() काटता है, replace() बदलता है, toUpperCase() / toLowerCase() case बदलते हैं, trim() space साफ़ करता है।
स्ट्रिंग्स immutable होती हैं — हर मेथड नई स्ट्रिंग लौटाता है।
टेम्पलेट लिटरल्स backtick और ${ } से मानों से वाक्य बनाते हैं।
स्ट्रिंग अक्षरों की माला है — गिनिए, काटिए, बदलिए।

उदाहरण समझिए

let name = document.getElementById("name").value; — input box में यूज़र ने जो कुछ टाइप किया है, उसे पढ़ता है।
name.trim() — नाम के पहले या बाद में यूज़र ने गलती से जो space टाइप किए हैं, उन्हें हटा देता है।
clean.length — साफ़ किए गए नाम के अक्षर गिनता है और संख्या दिखाता है।
clean.toUpperCase() — नाम को capital अक्षरों में दिखाता है, जैसे सर्टिफ़िकेट पर नाम।
`Hello ${clean}, welcome to KAMALDNP!` — एक टेम्पलेट लिटरल यूज़र के नाम को ${ } के अंदर डालकर स्वागत का वाक्य बनाता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Name Formatter</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; }
#out { background-color: white; border: 2px solid #1e3a5f; padding: 14px; width: 340px; }
</style>
</head>
<body>

<h1>Name Formatter</h1>
<p>Type your name (with extra spaces if you like) and format it:</p>
<input type="text" id="name" value="  rahul verma ">
<button onclick="formatName()">Format My Name</button>
<div id="out">
<p>Greeting: —</p>
<p>Length: —</p>
<p>Uppercase: —</p>
</div>

<script>
function formatName() {
  let raw = document.getElementById("name").value;
  let clean = raw.trim();
  let greet = `Hello ${clean}, welcome to KAMALDNP!`;
  document.getElementById("out").innerHTML =
    "<p>Greeting: " + greet + "</p>" +
    "<p>Length: " + clean.length + " letters</p>" +
    "<p>Uppercase: " + clean.toUpperCase() + "</p>";
}
</script>

</body>
</html>

परिणाम

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Name Formatter</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; }
#out { background-color: white; border: 2px solid #1e3a5f; padding: 14px; width: 340px; }
</style>
</head>
<body>

<h1>Name Formatter</h1>
<p>Type your name (with extra spaces if you like) and format it:</p>
<input type="text" id="name" value="  rahul verma ">
<button onclick="formatName()">Format My Name</button>
<div id="out">
<p>Greeting: —</p>
<p>Length: —</p>
<p>Uppercase: —</p>
</div>

</body>
</html>

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

परिणाम

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

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