Làm thế nào để bạn định dạng một chuỗi trong JavaScript?

Trong JavaScript, một chuỗi là một nhóm các ký tự được bao bởi một cặp dấu ngoặc kép đơn hoặc kép. Có nhiều cách để định dạng chuỗi trong JavaScript.

Bạn có thể sử dụng các phương pháp hoặc toán tử cụ thể để kết hợp các chuỗi. Bạn thậm chí có thể thực hiện các thao tác cụ thể để quyết định chuỗi nào xuất hiện ở đâu và khi nào.

LÀM VIDEO TRONG NGÀY

Tìm hiểu cách định dạng các chuỗi JavaScript của bạn bằng cách sử dụng các phương pháp nối và các ký tự mẫu.

Nối chuỗi

JavaScript cho phép bạn nối các chuỗi bằng một số cách tiếp cận. Một cách tiếp cận hữu ích là concat () phương pháp. Phương pháp này sử dụng hai hoặc nhiều chuỗi. Nó sử dụng một chuỗi gọi đơn và lấy một hoặc nhiều chuỗi làm đối số.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName.concat(" ", lastName); 
console.log(stringVal);

Ở đây, concat nối các đối số chuỗi (khoảng trắng và lastName) với chuỗi đang gọi (firstName). Sau đó, mã lưu trữ chuỗi mới kết quả trong một biến (stringVal) và in giá trị mới vào bảng điều khiển trình duyệt :

Một cách khác để nối một tập hợp các chuỗi là sử dụng toán tử cộng. Phương pháp này cho phép bạn kết hợp các biến chuỗi và các ký tự chuỗi để tạo chuỗi mới.

const firstName = "John"; 
const middleName = "Mike"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName + " " + middleName + " " + lastName; 
console.log(stringVal);

Đoạn mã trên in kết quả sau ra bảng điều khiển:

Cách tiếp cận thứ ba để nối các chuỗi JavaScript của bạn yêu cầu sử dụng dấu cộng và dấu bằng. Phương pháp này cho phép bạn thêm một chuỗi mới vào cuối chuỗi hiện có.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName; 
stringVal += " "; 
stringVal += lastName; 
  
console.log(stringVal);

Đoạn mã này thêm một khoảng trống và giá trị của biến lastName vào biến firstName, tạo ra kết quả sau:

Chữ mẫu

Các ký tự mẫu là một tính năng của ES6 cho phép bạn định dạng các chuỗi JavaScript. Một ký tự mẫu sử dụng một cặp dấu gạch ngược (`) để hiển thị các chuỗi. Phương pháp định dạng chuỗi này cho phép bạn hiển thị các chuỗi nhiều dòng rõ ràng hơn trong JavaScript.

let html; 
  
html = `<ul> 
       <li> Name: John Doe </li> 
       <li> Age: 24 </li> 
       <li> Job: Software Engineer </li> 
       </ul>`; 
  
document.body.innerHTML = html;

Mã JavaScript ở trên sử dụng HTML để in danh sách ba mục trong trình duyệt:

Để đạt được cùng một đầu ra mà không có các ký tự mẫu (hoặc trước các ký tự mẫu), bạn sẽ cần sử dụng dấu ngoặc kép. Tuy nhiên, bạn sẽ không thể mở rộng mã qua nhiều dòng như bạn có thể với các ký tự mẫu.

làm thế nào để sửa chữa đĩa cứng bên ngoài không được phát hiện

let html; 
  
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>"; 
  
document.body.innerHTML = html;

Nội suy chuỗi

Các ký tự mẫu cho phép bạn sử dụng các biểu thức trong chuỗi JavaScript của mình thông qua một quá trình được gọi là nội suy. Với nội suy chuỗi, bạn có thể nhúng các biểu thức hoặc biến trong chuỗi của mình bằng cách sử dụng $ {biểu thức} trình giữ chỗ. Đây là lúc giá trị của các ký tự mẫu JavaScript trở nên thực sự rõ ràng.

let userName = "Jane Doe"; 
let age = 21; 
let job = "Web Developer"; 
let experience = 3; 
  
let html; 
  
html = `<ul> 
       <li> Name: ${userName} </li> 
       <li> Age: ${age} </li> 
       <li> Job Title: ${job} </li> 
       <li> Years of Experience: ${experience} </li> 
       <li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li> 
       </ul>`; 
  
document.body.innerHTML = html;

Đoạn mã trên tạo ra kết quả sau trong bảng điều khiển:

Bốn đối số đầu tiên của $ {biểu thức} trình giữ chỗ là các biến chuỗi, nhưng trình giữ chỗ thứ năm là một biểu thức điều kiện. Biểu thức dựa vào giá trị của một trong các biến (trải nghiệm), để chỉ định những gì nó sẽ hiển thị trong trình duyệt.

Các thành phần định dạng trên trang web của bạn bằng JavaScript

Ngoài sự liên kết chức năng của nó với sự phát triển trang web, JavaScript hoạt động với HTML để ảnh hưởng đến thiết kế và bố cục của một trang web. Nó có thể thao tác văn bản xuất hiện trên một trang web, như trường hợp của các ký tự mẫu.

Nó thậm chí có thể chuyển đổi HTML sang hình ảnh và hiển thị chúng trên trang web.