Javascript: Template string là gì?

Template string là cách mà chúng ta tạo ra một string dễ dàng hơn với các biến(variable), biểu thức(expression) bên trong string. Đặc biệt là cho string nhiều dòng như template của HTML.

Xem ví dụ nhé:

const name = 'Thau';
const string = 'My name is' + name + 'and I\'m a engineer';

Trước đây để tạo một string chứa biến(variable) và biểu thức(expression) thì chúng ta phải dùng cách cộng từng chuỗi lại với nhau. Cách này gây một số khó chịu nhất định nếu chúng ta có nhiều biến và biểu thức.

Template string sinh ra để giải quyết bài toán đó. Chúng ta cùng viết lại đoạn code trên nhé 🙂

const name = 'Thau';
const string = `My name is ${name} and I'm a engineer`;

Chỉ một chuỗi duy nhất trong dấu backtick “ và biểu thức, biến trong dấu ${biến hoặc biểu thức}. Cool 🙂
Không còn cộng chuỗi phức tạp nữa. Đặc biệt, nó còn hữu ích hơn khi ta dùng để tạo một Template cho HTML. Hãy xem ví dụ sau nhé:

const person = {
 name: 'Thau',
 job: 'Web Developer',
 city: 'Ho Chi Minh',
 bio: 'Thau is a really cool guy that loves to teach web development!',
};
const markup = `
<div class="person">
 <h2>
 ${person.name}
 <span class="job">${person.job}</span>
 </h2>
 <p class="location">${person.city}</p>
 <p class="bio">${person.bio}</p>
</div>
`;

console.log(markup);
document.body.innerHTML = markup;

Thử tưởng tượng bạn dùng  dấu + để cộng chuỗi giữa các biên, nó rất khó để viết đúng. Template string đã làm cho cuộc sống của coder dễ dàng hơn rất nhiều.

Thậm chí chúng ta còn có thể chèn if vào template:

const song = {
name: 'Dying to live',
artist: 'Tupac',
featuring: 'Biggie Smalls'
};

const markup = `
<div class="song">
 <p>
 ${song.name} — ${song.artist}
 ${song.featuring ? `(Featuring ${song.featuring})` : ''}
 </p>
</div>
`;
document.body.innerHTML = markup;

Leave a Reply

Your email address will not be published. Required fields are marked *