JavaScript Type Conversion తెలుగులో | Number(), parseInt(), Template Literals

• Implicit మరియు Explicit type conversion అంటే ఏమిటి
• Number(), parseInt(), parseFloat(), String(), Boolean() ఎలా వాడాలి
• Truthy మరియు Falsy విలువలు
• Template literals (backticks) తో text రాయడం
• Multi-line strings

ఒక విలువ యొక్క data type ని మార్చడమే type conversion. ఇది రెండు రకాలుగా జరుగుతుంది:

1. Implicit conversion (అంతర్గత మార్పు): JavaScript తనంతట తాను, మనకు చెప్పకుండానే type మార్చేస్తుంది.
2. Explicit conversion (స్పష్టమైన మార్పు): మనం ఉద్దేశపూర్వకంగా, function వాడి type మారుస్తాం.

console.log("5" + 2);
console.log("5" - 2);
console.log(true + 1);

• "5" + 2 → + string తో వస్తే అతికిస్తుంది, కాబట్టి "52".
• "5" - 2 → - కి అతికించడం అనే పని లేదు, కాబట్టి "5" ని సంఖ్యగా మార్చి లెక్కించింది: 3.
• true + 1 → true ని 1 గా మార్చి కూడింది: 2.

ఈ ఆటోమేటిక్ మార్పులు ఎప్పుడు ఎలా జరుగుతాయో గుర్తుంచుకోవడం కష్టం, పైగా పొరపాట్లకు దారి తీస్తాయి. అందుకే మనమే స్పష్టంగా (explicitly) మార్చడం మంచి అలవాటు.

Number(): ఏదైనా విలువను number గా మార్చడం

console.log(Number("42"));
console.log(Number("3.14"));
console.log(Number("abc"));
console.log(Number(true));
console.log(Number(false));

• "42" మరియు "3.14" సరైన సంఖ్యల్లా ఉన్నాయి కాబట్టి మారాయి.
• "abc" ని సంఖ్యగా మార్చలేం కాబట్టి NaN వచ్చింది.
• true → 1, false → 0.

మరికొన్ని ఉదాహరణలు:

console.log(Number(" 12 "));
console.log(Number(""));
console.log(Number("12px"));
console.log(Number(null));
console.log(Number(undefined));

• రెండు వైపులా ఉన్న ఖాళీలు (spaces) ని పట్టించుకోదు: 12.
• ఖాళీ string "" → 0 వస్తుంది. ఇది జాగ్రత్తగా గమనించాల్సిన విషయం.
• "12px" లో అక్షరాలు ఉన్నాయి కాబట్టి NaN.

ఉదాహరణ: రెండు సంఖ్యలను కూడటం

Website లో user టైప్ చేసే ప్రతిదీ string గా వస్తుంది. అది సంఖ్యలా కనిపించినా. అందుకే లెక్కలు చేసే ముందు మార్చాలి.

const input1 = "25";
const input2 = "15";

console.log(input1 + input2);
console.log(Number(input1) + Number(input2));

మార్చకపోతే "2515" వచ్చింది (అతికింపు), మార్చాక సరైన కూడిక 40 వచ్చింది.

parseInt() మరియు parseFloat(): string నుంచి సంఖ్యను తీయడం

parseInt() string ని ఎడమ నుంచి కుడికి చదివి, పూర్ణ సంఖ్య (integer) ని తీసుకుంటుంది. అక్షరం కనిపించగానే ఆగిపోతుంది.

console.log(parseInt("42px"));
console.log(parseInt("3.99"));
console.log(parseInt("abc"));
console.log(parseInt("px42"));

• "42px" → 42 (p దగ్గర ఆగింది).
• "3.99" → 3 (దశాంశం తీసేసింది, round చేయదు, కేవలం కత్తిరిస్తుంది).
• "px42" → మొదటి అక్షరమే సంఖ్య కాదు, కాబట్టి NaN.

parseFloat() దశాంశాలను కూడా తీసుకుంటుంది:

console.log(parseFloat("3.14abc"));
console.log(parseFloat("2.5"));

Number() మరియు parseInt() మధ్య తేడా

console.log(Number("42px"));
console.log(parseInt("42px"));

• Number() కఠినంగా ఉంటుంది: మొత్తం string సరైన సంఖ్య అయితేనే మారుస్తుంది.
• parseInt() / parseFloat() ఉదారంగా ఉంటాయి: ముందు ఉన్న సంఖ్య భాగాన్ని తీసుకుంటాయి.

String(): ఏదైనా విలువను string గా మార్చడం

console.log(String(123));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
console.log(typeof String(123));

Screen మీద చూస్తే 123 అలాగే కనిపిస్తుంది, కానీ typeof చూస్తే string అని వస్తుంది.

Boolean(): ఏదైనా విలువను true/false గా మార్చడం

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));

ఏ విలువ true గా, ఏది false గా మారుతుందో తెలుసుకోవడమే తర్వాతి భాగం.

JavaScript లో ప్రతి విలువ ని boolean గా చూస్తే, అది true లేదా false గా పరిగణించబడుతుంది.

• Truthy: boolean గా మారినప్పుడు true అయ్యే విలువలు.
• Falsy: boolean గా మారినప్పుడు false అయ్యే విలువలు.

Falsy విలువలు (ఇవి కేవలం 6 మాత్రమే గుర్తుంచుకోండి)

(మరో రెండు అరుదైనవి ఉన్నాయి: -0 మరియు 0n. వాటిని ఇప్పుడు పట్టించుకోవక్కర్లేదు.)

ఇవి తప్ప మిగతావన్నీ Truthy! ఇది చాలా సులభమైన నియమం.

console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));

ఇప్పుడు ఆశ్చర్యపరిచే truthy విలువలు చూడండి:

console.log(Boolean("0"));
console.log(Boolean("false"));
console.log(Boolean(" "));
console.log(Boolean(-1));
console.log(Boolean("hello"));

• "0" అనేది సున్నా కాదు, అది 0 అనే అక్షరం ఉన్న string, కాబట్టి truthy.
• "false" అనేది కేవలం text, boolean false కాదు. అందుకే truthy. (Chapter 4 లో మనం చెప్పిన bug ఇదే!)
• " " (ఒక space ఉన్న string) ఖాళీ string కాదు కాబట్టి truthy.
• -1 సున్నా కాదు, కాబట్టి truthy.

(ఖాళీ array [] మరియు ఖాళీ object {} కూడా truthy. Arrays, objects ని తర్వాత chapters లో నేర్చుకుంటాం.)

Truthy/Falsy ఎందుకు ముఖ్యం?

Condition లో boolean ఆశించే చోట ఏ విలువ ఉన్నా, JavaScript దాన్ని truthy లేదా falsy గా చూస్తుంది.

const userName = "";
console.log(userName ? "పేరు ఉంది" : "పేరు ఖాళీగా ఉంది");

const city = "హైదరాబాద్";
console.log(city ? "ఊరు ఉంది" : "ఊరు ఖాళీగా ఉంది");

Form లో user ఏదైనా టైప్ చేశాడా లేదా అని చెక్ చేయడానికి ఈ పద్ధతి చాలా ఉపయోగపడుతుంది.

!! ట్రిక్

ఏ విలువనైనా నేరుగా true/false గా మార్చడానికి !! (double not) వాడతారు:

console.log(!!"hello");
console.log(!!0);

Boolean() తో సమానమైన ఫలితం. ఇది code లో కనిపిస్తే భయపడకండి, అర్థం ఇదే.

పోలిక పట్టిక: ఒకే విలువ, మూడు రకాల మార్పులు

ఇప్పటివరకు variables తో text ని కలపాలంటే + వాడాం. ఉదాహరణకు:

const name = "రవి";
const age = 20;

console.log("నా పేరు " + name + ", నా వయసు " + age);

పని చేస్తుంది, కానీ quotes, + గుర్తులు, ఖాళీలు, అన్నీ చూసుకోవడం కష్టం. పెద్ద వాక్యాల్లో పొరపాట్లు తప్పవు. దీనికి సులభమైన మార్గమే Template Literals.

Backticks మరియు ${}

Template literal ని " " బదులు backticks ` ` తో రాస్తాం. (Keyboard లో 1 పక్కన, Tab పైన ఉన్న key.) లోపల variable విలువ చేర్చాలంటే ${variableName} అని రాస్తాం.

const name = "రవి";
const age = 20;

console.log(`నా పేరు ${name}, నా వయసు ${age}`);

ఫలితం ఒకటే, కానీ ఎంత శుభ్రంగా, చదవడానికి సులభంగా ఉందో చూడండి! + మరియు quotes గందరగోళం లేదు.

${} లోపల expressions కూడా రాయొచ్చు

${ } లోపల కేవలం variable పేరు మాత్రమే కాదు, లెక్కలు, పోలికలు, ternary కూడా రాయొచ్చు.

const price = 250;
const quantity = 3;
const marks = 60;

console.log(`2 + 3 = ${2 + 3}`);
console.log(`మొత్తం బిల్లు: ₹${price * quantity}`);
console.log(`ఫలితం: ${marks >= 35 ? "Pass" : "Fail"}`);

Multi-line strings (ఎక్కువ లైన్ల text)

పాత పద్ధతిలో ఎక్కువ లైన్లు కావాలంటే \n (కొత్త లైన్ గుర్తు) వాడాలి:

console.log("మొదటి లైన్\nరెండో లైన్");

Template literal తో, Enter నొక్కి కొత్త లైన్ లో రాస్తే చాలు:

const message = `నమస్కారం,
ఇది రెండో లైన్,
ఇది మూడో లైన్`;

console.log(message);

ఉదాహరణ: విద్యార్థి Report

const studentName = "సీత";
const maths = 80;
const science = 70;
const english = 90;

const total = maths + science + english;
const average = total / 3;

console.log(`విద్యార్థి: ${studentName}
Maths: ${maths}
Science: ${science}
English: ${english}
మొత్తం: ${total}
సగటు: ${average}
ఫలితం: ${average >= 35 ? "Pass" : "Fail"}`);

ఒకే template లో variables, లెక్కలు, ternary, multi-line అన్నీ కలిపి వాడాం. ఇదే Template Literals శక్తి.

ఎప్పుడు ఏది వాడాలి?

1. "100" మరియు "50" అనే రెండు strings ని number లుగా మార్చి కూడండి.
2. ఈ ఫలితాలు ఏమిటి? Number("abc"), parseInt("25kg"), parseFloat("2.5m"), Number(true), String(99) + 1.
3. కింది విలువలు Truthy నా Falsy నా చెప్పండి: 0, "hello", "", " ", null, "0", NaN, 5.
4. name, city, age variables తీసుకుని, template literal తో "నా పేరు ..., నేను ... లో ఉంటాను, నా వయసు ..." అనే వాక్యం print చేయండి.
5. ఈ code 30 print చేసేలా సరిచేయండి: let a = "10"; let b = "20"; console.log(a + b);

const a = "100";
const b = "50";
console.log(Number(a) + Number(b));

NaN
25
2.5
1
991

const name = "రవి";
const city = "హైదరాబాద్";
const age = 20;

console.log(`నా పేరు ${name}, నేను ${city} లో ఉంటాను, నా వయసు ${age}`);

let a = "10";
let b = "20";
console.log(Number(a) + Number(b));