ਟੈਮਪਲੇਟ ਲਿਟਰਲਸ ਕੀ ਹਨ?

Question

Accepted Answer

**Template literals** ਬੈਕਟਿਕਸ (`` ` ``) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਅਤੇ ਦੋ ਚੀਜ਼ਾਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ ਜੋ ਸਾਧਾਰਨ ਕੋਟਸ ਕੋਲ ਨਹੀਂ ਹਨ: **ਇੰਟਰਪੋਲੇਸ਼ਨ** ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਅਤੇ **ਮਲਟੀ-ਲਾਈਨ** ਸਟ੍ਰਿੰਗਸ। ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` Template literals ਤੋਂ ਪਹਿਲਾਂ ਤੁਸੀਂ `"Hi " + name + ", " + count + ...` ਲਿਖਦੇ ਸੀ — ਜ਼ਿਆਦਾ ਸ਼ਬਦਾਂ ਵਾਲਾ ਅਤੇ ਗਲਤੀ ਦੇ ਅਧੀਨ। ਇੰਟਰਪੋਲੇਸ਼ਨ ਬਹੁਤ ਹੀ ਚੰਗੀ ਪੜ੍ਹਨਯੋਗ ਹੈ। ## Tagged templates (ਉਨਤ) ਇੱਕ ਫੰਕਸ਼ਨ ਜੋ ਬੈਕਟਿਕਸ ਤੋਂ ਪਹਿਲਾਂ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਸਟ੍ਰਿੰਗ ਭਾਗਾਂ ਅਤੇ ਇੰਟਰਪੋਲੇਟ ਕੀਤੇ ਮੁੱਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਜੋ ਇਸਨੂੰ ਉਹਨਾਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਦਿੰਦਾ ਹੈ: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` ਇਹ **styled-components** ਜਿਵੇਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਸੁਰੱਖਿਅਤ SQL/HTML escaping ਸਹਾਇਕਾਂ ਨੂੰ ਸ਼ਕਤੀ ਦਿੰਦਾ ਹੈ। ## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ Template literals ਅੱਜ ਸਟ੍ਰਿੰਗਸ ਬਣਾਉਣ ਦਾ ਮਿਆਰੀ ਤਰੀਕਾ ਹੈ — ਪੜ੍ਹਨਯੋਗ ਇੰਟਰਪੋਲੇਸ਼ਨ, ਆਸਾਨ ਮਲਟੀ-ਲਾਈਨ ਟੈਕਸਟ, ਅਤੇ DSL-ਸ ਲਈ ਇੱਕ ਹੁੱਕ (tagged templates)।