คุณจัดรูปแบบสตริงใน JavaScript ได้อย่างไร

ใน JavaScript สตริงคือกลุ่มของอักขระที่ล้อมรอบด้วยเครื่องหมายอัญประกาศเดี่ยวหรือคู่ มีหลายวิธีในการจัดรูปแบบสตริงใน JavaScript

คุณสามารถใช้เมธอดหรือตัวดำเนินการเฉพาะเพื่อรวมสตริงได้ คุณยังสามารถดำเนินการเฉพาะเพื่อตัดสินใจว่าสตริงใดจะปรากฏที่ไหนและเมื่อไหร่

ทำไมกูเกิลใช้หน่วยความจำเยอะจัง

คลิปวิดีโอประจำวันนี้

เรียนรู้วิธีจัดรูปแบบสตริง JavaScript ของคุณโดยใช้วิธีการต่อและตัวอักษรเทมเพลต

การต่อสายอักขระ

JavaScript ช่วยให้คุณสามารถเชื่อมสตริงโดยใช้วิธีการต่างๆ แนวทางที่เป็นประโยชน์คือ concat() กระบวนการ. วิธีนี้ใช้สตริงตั้งแต่สองสตริงขึ้นไป ใช้สตริงการเรียกเดียวและรับสตริงอย่างน้อยหนึ่งสตริงเป็นอาร์กิวเมนต์

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

ที่นี่ concat รวมอาร์กิวเมนต์สตริง (ช่องว่างและนามสกุล) กับสตริงการเรียก (ชื่อ) รหัสจะเก็บสตริงใหม่ที่เป็นผลลัพธ์ในตัวแปร (stringVal) และ พิมพ์ค่าใหม่ไปยังคอนโซลเบราว์เซอร์ :

อีกวิธีหนึ่งในการต่อชุดของสตริงคือการใช้ตัวดำเนินการบวก วิธีนี้ช่วยให้คุณสามารถรวมตัวแปรสตริงและตัวอักษรสตริงเพื่อสร้างสตริงใหม่ได้

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

รหัสด้านบนพิมพ์ผลลัพธ์ต่อไปนี้ไปยังคอนโซล:

วิธีที่สามในการต่อสตริง JavaScript ของคุณต้องใช้เครื่องหมายบวกและเท่ากับ วิธีนี้ช่วยให้คุณเพิ่มสตริงใหม่ต่อท้ายสตริงที่มีอยู่ได้

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

โค้ดนี้ผนวกช่องว่างและค่าของตัวแปรlastName ต่อท้ายตัวแปร firstName ทำให้เกิดผลลัพธ์ดังต่อไปนี้:

เทมเพลต Literals

ตัวอักษรเทมเพลตเป็นคุณสมบัติ ES6 ที่ให้คุณจัดรูปแบบสตริง JavaScript เทมเพลตตามตัวอักษรใช้ backticks (`) เพื่อแสดงสตริง วิธีการจัดรูปแบบสตริงนี้ช่วยให้คุณสามารถแสดงสตริงหลายบรรทัดที่สะอาดขึ้นใน JavaScript

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

รหัส JavaScript ด้านบนใช้ HTML เพื่อพิมพ์รายการสามรายการในเบราว์เซอร์:

วิธีแตกไฟล์ tar gz

เพื่อให้ได้ผลลัพธ์เดียวกันโดยไม่มีตัวอักษรแม่แบบ (หรือก่อนตัวอักษรแม่แบบ) คุณจะต้องใช้เครื่องหมายอัญประกาศ อย่างไรก็ตาม คุณจะไม่สามารถขยายโค้ดไปหลายบรรทัดได้เท่ากับที่คุณสามารถทำได้ด้วยตัวอักษรเทมเพลต

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

การแก้ไขสตริง

ตัวอักษรเทมเพลตช่วยให้คุณใช้นิพจน์ในสตริง JavaScript ของคุณผ่านกระบวนการที่เรียกว่าการแก้ไข ด้วยการแก้ไขสตริง คุณสามารถฝังนิพจน์หรือตัวแปรในสตริงของคุณโดยใช้ ${การแสดงออก} ตัวยึดตำแหน่ง นี่คือจุดที่คุณค่าของตัวอักษรเทมเพลต JavaScript ชัดเจนอย่างแท้จริง

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;

รหัสด้านบนสร้างผลลัพธ์ต่อไปนี้ในคอนโซล:

อาร์กิวเมนต์สี่ข้อแรกของ ${การแสดงออก} ตัวยึดตำแหน่งเป็นตัวแปรสตริง แต่ตัวที่ห้าคือนิพจน์เงื่อนไข นิพจน์ขึ้นอยู่กับค่าของตัวแปรตัวใดตัวหนึ่ง (ประสบการณ์) เพื่อกำหนดสิ่งที่ควรแสดงในเบราว์เซอร์

การจัดรูปแบบองค์ประกอบบนหน้าเว็บของคุณด้วย JavaScript

นอกเหนือจากการเชื่อมโยงการทำงานกับการพัฒนาเว็บเพจแล้ว JavaScript ยังทำงานร่วมกับ HTML เพื่อมีอิทธิพลต่อการออกแบบและเลย์เอาต์ของเว็บเพจ มันสามารถจัดการข้อความที่ปรากฏบนเว็บเพจ เช่นเดียวกับกรณีของตัวอักษรแม่แบบ

มันสามารถแปลง HTML เป็นรูปภาพและแสดงบนหน้าเว็บได้