JavaScript లో Strings: Common Methods & Immutability
వెబ్ అప్లికేషన్లలో యూజర్ల పేర్లు, ఈమెయిల్ అడ్రస్లు, పాస్వర్డ్లు, సెర్చ్ బాక్స్ టెక్స్ట్, బ్లాగ్ కంటెంట్... ఇలా దాదాపు 80% డేటా అక్షరాల రూపంలోనే ఉంటుంది. JavaScript లో ఈ అక్షర సమూహాన్ని String అంటాం.
పూలదండ అనాలజీ (Flower Garland Analogy): ఒక దారంలో పూలను వరుసగా గుచ్చిన దండను ఊహించుకోండి. మొదటి పువ్వు స్థానం 0, రెండోది 1, మూడోది 2. String లోని అక్షరాలు కూడా సరిగ్గా ఇలాగే వరుసగా ఇండెక్స్ నంబర్లతో అమర్చబడి ఉంటాయి.
ఈ పాఠంలో మనం కేవలం కోడ్ చూడటమే కాకుండా, తెరవెనుక జావాస్క్రిప్ట్ మెమరీలో స్ట్రింగ్స్ ఎలా నిల్వ ఉంటాయి? String Immutability అంటే ఏమిటి? మరియు రియల్-వరల్డ్ ప్రాజెక్టులలో టెక్స్ట్ ని క్లీన్ చేయడానికి, వెతకడానికి, ముక్కలుగా విడదీయడానికి వాడే అత్యంత శక్తివంతమైన String Methods గురించిన సమగ్ర సిద్ధాంతాన్ని నేర్చుకుందాం.
JavaScript లో టెక్స్ట్ ని మూడు రకాల కొటేషన్లలో రాయవచ్చు:
- Single Quotes (
'నమస్కారం'): సాధారణ పదాలకు వాడతాం. - Double Quotes (
"JavaScript"): సాధారణ వాక్యాలకు వాడతాం. సింగిల్ కోట్స్ కి దీనికి పనితీరులో ఎలాంటి తేడా లేదు. - Backticks (
`విలువ: ${total}`- Template Literals): వేరియబుల్స్ ని సులభంగా కలపడానికి (Interpolation) మరియు మల్టీ-లైన్ టెక్స్ట్ రాయడానికి వాడతాం (Chapter 6 లో నేర్చుకున్నది).
Character Indexing (అక్షరాల స్థాన సంఖ్య):
Arrays లాగానే Strings కూడా 0-Based Indexing కలిగి ఉంటాయి. అంటే మొదటి అక్షరం ఇండెక్స్ 0 వద్ద, రెండోది 1 వద్ద ఉంటుంది. స్పేస్ (space), కామా, ఫుల్స్టాప్లు కూడా ఒక్కో అక్షరంగానే లెక్కించబడతాయి!
| ఇండెక్స్ (Index) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|---|
| అక్షరం (Character) | 'J' |
'a' |
'v' |
'a' |
'S' |
'c' |
'r' |
'i' |
'p' |
't' |
🔍 ఇండెక్స్ రూల్స్:
- str[0] లేదా str.charAt(0) మొదటి అక్షరాన్ని ఇస్తుంది ('J').
- str.length మొత్తం అక్షరాల సంఖ్యను చెబుతుంది (ఇక్కడ 10).
- చివరి అక్షరాన్ని పొందడానికి str[str.length - 1] లేదా ఆధునిక str.at(-1) వాడతాం ('t').
- లేని ఇండెక్స్ ని పిలిస్తే బ్రాకెట్ నొటేషన్ undefined ని, charAt() ఖాళీ స్ట్రింగ్ "" ని ఇస్తుంది.
ఇది ప్రతి సాఫ్ట్వేర్ ఇంటర్వ్యూలో అడిగే గోల్డెన్ కాన్సెప్ట్! జావాస్క్రిప్ట్ లో Strings ఆర్ Immutable. అంటే "ఒకసారి కంప్యూటర్ మెమరీలో స్ట్రింగ్ సృష్టించబడిన తర్వాత, దాని లోపలి అక్షరాలను నేరుగా మార్చడం అసాధ్యం".
⚠️ బిగినర్స్ చేసే అతిపెద్ద ఊహ:
ఒక విద్యార్థి let word = "hello"; అని రాసి, మొదటి అక్షరాన్ని క్యాపిటల్ చేద్దామని word[0] = "H"; అని రాస్తే... అది "Hello" గా మారుతుందా? మారదు! word ఇప్పటికీ "hello" గానే ఉంటుంది. ఎందుకంటే స్ట్రింగ్స్ మ్యుటేషన్ ని అనుమతించవు.
మరి Methods వాడినప్పుడు ఏం జరుగుతుంది?
మనం str.toUpperCase() లేదా str.replace() లేదా str.trim() వంటి ఏ మెథడ్ వాడినా సరే, అది అసలు స్ట్రింగ్ ని తాకదు (మార్చదు). కేవలం ఆ మార్పులతో కూడిన ఒక సరికొత్త స్ట్రింగ్ (Brand New String) ని తయారుచేసి మనకు రిటర్న్ చేస్తుంది!
కాబట్టి ఆ కొత్త ఫలితం మనకు కావాలంటే, దాన్ని వేరే వేరియబుల్ లో దాచుకోవాలి (const result = str.toUpperCase();) లేదా పాత వేరియబుల్ కి తిరిగి అసైన్ చేయాలి (str = str.toUpperCase();). ఈ విషయాన్ని ఎప్పటికీ మర్చిపోకూడదు!
నిత్యజీవితంలో వెబ్ డెవలపర్లు విస్తృతంగా ఉపయోగించే ప్రధాన స్ట్రింగ్ మెథడ్స్ జాబితా ఇక్కడ ఉంది. ప్రతి మెథడ్ యొక్క పనితీరును సులభంగా అర్థం చేసుకోవడానికి వర్గీకరించబడింది:
| Method పేరు | ఏం చేస్తుంది? (Purpose) | రియల్ ఎగ్జాంపుల్ & ఫలితం |
|---|---|---|
toUpperCase() |
అన్ని అక్షరాలను క్యాపిటల్ (పెద్ద) అక్షరాలుగా మారుస్తుంది. | "js".toUpperCase() ➔ "JS" |
toLowerCase() |
అన్ని అక్షరాలను స్మాల్ (చిన్న) అక్షరాలుగా మారుస్తుంది. | "ADMIN".toLowerCase() ➔ "admin" |
trim() |
ముందు మరియు వెనుక ఉన్న అనవసర ఖాళీలను (Spaces) తొలగిస్తుంది. | " hi ".trim() ➔ "hi" |
includes(sub) |
ఆ పదం లేదా అక్షరం స్ట్రింగ్ లో ఉందో లేదో true/false చెబుతుంది. |
"JavaScript".includes("Script") ➔ true |
startsWith(sub) |
స్ట్రింగ్ ఆ నిర్దిష్ట పదంతో మొదలవుతుందో లేదో చెక్ చేస్తుంది. | "https://site.com".startsWith("https") ➔ true |
endsWith(sub) |
స్ట్రింగ్ ఆ నిర్దిష్ట పదంతో ముగుస్తుందో లేదో చెక్ చేస్తుంది. | "photo.png".endsWith(".png") ➔ true |
indexOf(sub) |
ఆ పదం మొదలయ్యే ఇండెక్స్ స్థానాన్ని ఇస్తుంది (లేకపోతే -1). |
"hello".indexOf("ll") ➔ 2 |
slice(start, end) |
నిర్దిష్ట ఇండెక్స్ నుండి ఇండెక్స్ వరకు ముక్కను కత్తిరించి తెస్తుంది. | "JavaScript".slice(0, 4) ➔ "Java" |
replace(old, new) |
మొట్టమొదటిసారి వచ్చిన పదాన్ని మాత్రమే కొత్త పదంతో రీప్లేస్ చేస్తుంది. | "tea and tea".replace("tea", "coffee") ➔ "coffee and tea" |
replaceAll(old, new) |
స్ట్రింగ్ లో కనిపించిన అన్ని పాత పదాలను కొత్త పదంతో మారుస్తుంది. | "tea and tea".replaceAll("tea", "coffee") ➔ "coffee and coffee" |
split(delimiter) |
స్ట్రింగ్ ని నిర్దిష్ట గుర్తు ఆధారంగా విడగొట్టి Array గా మారుస్తుంది. | "red,green,blue".split(",") ➔ ['red', 'green', 'blue'] |
padStart(len, char) |
కావాల్సిన పొడవు వచ్చే వరకు మొదట్లో నిర్దిష్ట అక్షరాలను నింపుతుంది (Masking). | "3456".padStart(8, "*") ➔ "****3456" |
పై పట్టికలోని ప్రధాన మెథడ్స్ వాస్తవంగా ఎలా పనిచేస్తాయో చూపించే ఏకైక సమగ్ర కోడ్ ఉదాహరణ ఇది. ప్రతి లైన్ ఔట్పుట్ను గమనించండి:
// 1. స్పేస్లు మరియు కేస్ మార్పు
const rawInput = " JavaScript Programming ";
const cleaned = rawInput.trim();
console.log("Cleaned:", cleaned);
console.log("Upper:", cleaned.toUpperCase());
console.log("Lower:", cleaned.toLowerCase());
// 2. భాగాలను కత్తిరించడం (Slicing)
console.log("Slice 0-10:", cleaned.slice(0, 10)); // 'Java' నుండి 'Script' వరకు
console.log("Slice Last 11:", cleaned.slice(-11)); // చివరి 11 అక్షరాలు
// 3. శోధన & తనిఖీ (Searching)
console.log("Includes 'Script'?:", cleaned.includes("Script"));
console.log("Starts with 'Java'?:", cleaned.startsWith("Java"));
console.log("Ends with 'ing'?:", cleaned.endsWith("ing"));
console.log("Index of 'Program'?:", cleaned.indexOf("Program"));
// 4. మార్పిడి (Replace)
console.log("Replace:", cleaned.replace("Programming", "Masterclass"));
// 5. String ని Array గా మార్చడం (Split)
const languages = "JavaScript,Python,Java,C++";
const langArray = languages.split(",");
console.log("Array from String:", langArray);
// 6. Immutability చెక్: అసలు rawInput మారలేదని గమనించండి!
console.log("Original Unchanged?:", rawInput.length === 28);
Cleaned: JavaScript Programming
Upper: JAVASCRIPT PROGRAMMING
Lower: javascript programming
Slice 0-10: JavaScript
Slice Last 11: Programming
Includes 'Script'?: true
Starts with 'Java'?: true
Ends with 'ing'?: true
Index of 'Program'?: 11
Replace: JavaScript Masterclass
Array from String: [ 'JavaScript', 'Python', 'Java', 'C++' ]
Original Unchanged?: true
rawInput.trim()ముందు, వెనుక ఉన్న 6 ఖాళీ స్థలాలను తొలగించింది, మధ్యలోని స్పేస్ ని అలాగే ఉంచింది.cleaned.slice(0, 10)index 0 నుండి 9 వరకు మాత్రమే తీసుకుంది (10 ని కలపలేదు).cleaned.slice(-11)ఋణ సంఖ్య ఇవ్వడం వల్ల చివరి నుంచి 11 అక్షరాలను కత్తిరించి "Programming" ని తెచ్చింది.- చివరి లైన్ లో
rawInputఇప్పటికీ తన అసలు పొడవు 28 తోనే ఉంది, అంటే మెథడ్స్ ఏవీ అసలు డేటాను మార్చలేదు!
స్ట్రింగ్ లోని ఒక భాగాన్ని తీసుకోవడానికి JavaScript లో మూడు పద్ధతులు కనిపిస్తాయి. వీటి మధ్య గల సూక్ష్మమైన తేడాలు ఇంటర్వ్యూలలో చాలా ముఖ్యం:
| Method | పారామీటర్స్ | నెగటివ్ ఇండెక్స్ (-1) పని చేస్తుందా? | ఆధునిక సిఫార్సు |
|---|---|---|---|
slice(start, end) |
ప్రారంభ ఇండెక్స్, ముగింపు ఇండెక్స్ (end కలపదు) | అవును (Yes) — చివరి నుండి సులభంగా లెక్కిస్తుంది. | ✅ రికమండెడ్: ఆధునిక కోడింగ్ లో 100% ఇదే వాడాలి. |
substring(start, end) |
ప్రారంభ ఇండెక్స్, ముగింపు ఇండెక్స్ | కాదు (No) — నెగటివ్ విలువలను 0 గా భావిస్తుంది. ఒకవేళ start > end అయితే స్థానాలను తారుమారు చేస్తుంది. | పాత కోడ్ లో కనిపిస్తుంది, నెగటివ్ సపోర్ట్ ఉండదు. |
substr(start, length) |
ప్రారంభ ఇండెక్స్, ఎన్ని అక్షరాలు కావాలో సంఖ్య | అవును | ❌ Deprecated: ఈ మెథడ్ ని JavaScript ప్రమాణాల నుండి తొలగించారు, కొత్త ప్రాజెక్ట్లలో అస్సలు వాడకూడదు! |
🛡️ రియల్-వరల్డ్ కేస్: సెన్సిటివ్ డేటా మాస్కింగ్ (Data Masking)
బ్యాంకింగ్ సైట్లలో లేదా ఇ-కామర్స్ లో మీ క్రెడిట్ కార్డు లేదా ఆధార్ కార్డ్ నంబర్ "1234567890123456" ని మొత్తం చూపించరు. చివరి 4 అంకెలు మాత్రమే చూపించి మిగతావి "************3456" గా దాచిపెడతారు. దీన్ని slice(-4) మరియు padStart() లతో కేవలం 2 లైన్లలో చేయవచ్చు:
const card = "1234567890123456";
const masked = card.slice(-4).padStart(card.length, "*"); ➔ ఫలితం: "************3456"
స్ట్రింగ్స్ మరియు అర్రేస్ మధ్య వారధి లాంటివి ఈ రెండు మెథడ్స్:
split(గుర్తు): ఒక స్ట్రింగ్ ని ఆ గుర్తు వద్ద కత్తిరించి ముక్కలను Array గా మారుస్తుంది.join(గుర్తు): Array లోని ముక్కలన్నింటినీ మళ్ళీ కలిపి ఒకే String గా మారుస్తుంది (Chapter 14 లో నేర్చుకున్నది).
🔄 ఇంటర్వ్యూ క్లాసిక్ ట్రిక్: పదాన్ని తిరగేయడం (Reverse a String / Palindrome Check)
JavaScript లో స్ట్రింగ్స్ కి డైరెక్ట్ గా reverse() మెథడ్ ఉండదు (అది కేవలం Array కి మాత్రమే ఉంటుంది). కాబట్టి ఒక పదాన్ని వెనక్కి తిప్పడానికి ఈ మూడు స్టెప్స్ చైన్ ని వాడతారు:
దశ 1 (విడదీయడం): "madam".split("") ➔ ['m', 'a', 'd', 'a', 'm'] (అక్షరాల అర్రే)
దశ 2 (తిప్పడం): .reverse() ➔ అక్షరాలను వెనక్కి తిప్పుతుంది.
దశ 3 (కలపడం): .join("") ➔ మళ్ళీ స్ట్రింగ్ గా మారుస్తుంది.
const isPalindrome = str === str.split("").reverse().join("");
📝 వాక్యంలోని పదాల సంఖ్యను లెక్కించడం (Word Count Logic):
ఒక పేరాగ్రాఫ్ లో ఎన్ని పదాలు ఉన్నాయో తెలుసుకోవడానికి స్పేస్ " " ఆధారంగా split చేసి దాని పొడవును చూస్తే సరిపోతుంది:
const wordsCount = "మన Our Compiler లో కోడింగ్ నేర్చుకోండి".trim().split(/\s+/).length; (ఫలితం: 5 పదాలు).
-
Method ఫలితాన్ని వేరియబుల్ లో దాచడం మర్చిపోవడం:
let name = "anil"; name.toUpperCase(); console.log(name);అని రాస్తే ఇప్పటికీ "anil" అనే ప్రింట్ అవుతుంది. ఎందుకంటే స్ట్రింగ్స్ మార్చబడవు!name = name.toUpperCase();అని తిరిగి అసైన్ చేయాలి. -
replace()అన్నీ మార్చేస్తుందనుకోవడం:"cat and cat".replace("cat", "dog")రాస్తే కేవలం మొదటి పిల్లి మాత్రమే కుక్క అవుతుంది:"dog and cat". అన్నింటినీ మార్చాలంటే తప్పనిసరిగాreplaceAll()లేదా గ్లోబల్ రెజెక్స్/cat/gవాడాలి. -
Case-Sensitivity మర్చిపోవడం:
"Admin" === "admin"ఎల్లప్పుడూfalseఇస్తుంది. యూజర్ లాగిన్ చెకింగ్ లో ఇలాంటి సమస్యలు రాకుండా ఉండటానికి, పోల్చే ముందు రెండింటినీinput.toLowerCase() === "admin"గా మార్చి పోల్చాలి. -
slice(0, 5)లో 5వ అక్షరం కూడా వస్తుందనుకోవడం:slice(start, end)లోendఇండెక్స్ పరిగణనలోకి తీసుకోబడదు.0, 5అంటే కేవలం 0, 1, 2, 3, 4 ఇండెక్సులు (మొత్తం 5 అక్షరాలు) మాత్రమే వస్తాయి. -
నంబర్స్ & స్ట్రింగ్స్ మధ్య
+కన్క్యాటినేషన్ గందరగోళం: ఒకటి సంఖ్య, మరొకటి స్ట్రింగ్ అయినప్పుడు+ఆపరేటర్ కలపడం (Add) చేయదు, అతికిస్తుంది (Concatenate). ఉదాహరణకు"10" + 5అనేది"105"అవుతుంది కానీ15కాదు. లెక్కలు చేసే ముందుNumber(val)తో మార్చాలి.
ఈ క్రింది ప్రాక్టీస్ ప్రశ్నలను ఆలోచించి, మీ మనసులో లేదా ఎడిటర్ లో పరిష్కరించడానికి ప్రయత్నించండి:
- యూజర్ ఇచ్చిన ఈమెయిల్ లోని అక్షరాలను క్లీన్ చేయడానికి ముందున్న స్పేస్లను తీసివేసి, చిన్న అక్షరాలుగా మార్చే కోడ్ రాయండి.
- ఒక పదం పాలిండ్రోమ్ (ముందు నుండి చదివినా, వెనుక నుండి చదివినా ఒకేలా ఉండే పదం, ఉదా: "racecar") అవునా కాదా చెక్ చేయండి.
"frontend-backend-fullstack"స్ట్రింగ్ లోని హైఫన్-ల స్థానంలో స్పేస్" "వచ్చేలా మార్చండి.- ఒక మొబైల్ నంబర్
"9876543210"లో మొదటి 6 అంకెలను"*"చేసి, చివరి 4 అంకెలను మాత్రమే చూపించండి. - ఒక వాక్యం "https://" తో ప్రారంభమవుతుందో లేదో తనిఖీ చేయండి.
"developer"పదంలోని మొదటి అక్షరాన్ని మాత్రమే క్యాపిటల్ ("Developer") గా మార్చే లాజిక్ రాయండి.
👉 6 ప్రశ్నల సమాధానాలు & లాజిక్ చూడండి
1. ఈమెయిల్ నార్మలైజేషన్:
const email = " Kiran.Kumar@GMAIL.com ".trim().toLowerCase();
console.log(email); // Output: "kiran.kumar@gmail.com"
2. పాలిండ్రోమ్ చెక్ (Reverse Chain):
const word = "racecar";
const isPalindrome = word === word.split("").reverse().join("");
console.log(isPalindrome); // Output: true
3. replaceAll తో హైఫన్ మార్పు:
const str = "frontend-backend-fullstack".replaceAll("-", " ");
console.log(str); // Output: "frontend backend fullstack"
4. ఫోన్ నంబర్ మాస్కింగ్ (slice & padStart):
const phone = "9876543210";
const masked = phone.slice(-4).padStart(phone.length, "*");
console.log(masked); // Output: "******3210"
5. startsWith చెక్:
const url = "https://ourcompiler.com";
console.log(url.startsWith("https://")); // Output: true
6. మొదటి అక్షరాన్ని Capitalize చేయడం:
const role = "developer";
const capitalized = role.charAt(0).toUpperCase() + role.slice(1);
console.log(capitalized); // Output: "Developer"
వెబ్సైట్లలో యూజర్లు ఫారమ్స్ ఫిల్ చేసేటప్పుడు పొరపాటున ఇచ్చే అదనపు స్పేస్లు తీసివేయడం, కేస్ సరిదిద్దడం మరియు బ్యాడ్ వర్డ్స్ ని సెన్సార్ చేసే రియల్-వరల్డ్ స్క్రిప్ట్ ఇది. కంపైలర్ లో రన్ చేసి చూడండి:
function sanitizeUserComment(rawComment) {
// 1. అదనపు ఖాళీలను తొలగించడం
const clean = rawComment.trim();
// 2. పదాల సంఖ్యను లెక్కించడం
const wordCount = clean.split(/\s+/).length;
// 3. నిషేధిత పదాలను సెన్సార్ చేయడం
const safeText = clean
.replaceAll("spam", "***")
.replaceAll("fake", "****");
// 4. మొదటి అక్షరాన్ని క్యాపిటలైజ్ చేయడం
const formatted = safeText.charAt(0).toUpperCase() + safeText.slice(1);
return {
originalLength: rawComment.length,
finalText: formatted,
totalWords: wordCount
};
}
const result = sanitizeUserComment(" this is a spam comment with fake data ");
console.log("ఫలితం:", result.finalText);
console.log("మొత్తం పదాలు:", result.totalWords);
ఫలితం: This is a *** comment with **** data
మొత్తం పదాలు: 7
📌 సారాంశం (Quick Summary):
- String = అక్షరాల వరుస క్రమం (0-based Indexing). సింగిల్, డబుల్ కోట్స్ లేదా బ్యాక్టిక్స్ లో రాస్తాం.
- Immutability: Strings ఎప్పటికీ మారవు. ఏ మెథడ్ వాడినా అది అసలు స్ట్రింగ్ ని మార్చదు, కొత్త స్ట్రింగ్ ని రిటర్న్ చేస్తుంది.
- సవరణ & క్లీనింగ్:
trim()స్పేస్లను తీసేస్తుంది,toUpperCase()/toLowerCase()కేస్ మారుస్తాయి. - కత్తిరించడం:
slice(start, end)సురక్షితమైనది, నెగటివ్ ఇండెక్స్slice(-4)చివరి నుండి కత్తిరిస్తుంది. - రీప్లేస్:
replace()ఒక్కదాన్నే మారుస్తుంది, అన్నీ మారాలంటేreplaceAll()వాడాలి. - మార్పిడి:
split()స్ట్రింగ్ ని Array గా,join()Array ని String గా మారుస్తాయి. - వెతకడం:
includes(),startsWith(),endsWith()లుtrue/falseఇస్తాయి.indexOf()ఇండెక్స్ నంబర్ ఇస్తుంది (లేకపోతే-1).
👉 తర్వాతి పాఠం: Math & Date Objects →
టెక్స్ట్ డేటాను మేనేజ్ చేయడం నేర్చుకున్నాం. తర్వాతి పాఠంలో గణిత లెక్కలు (రౌండింగ్, రాండమ్ నంబర్స్, కనిష్ట-గరిష్టాలు) మరియు కంప్యూటర్ లో సమయం, తేదీలతో పనిచేసే Math & Date Objects గురించి వివరంగా నేర్చుకుందాం!