บทนำ
เมื่อทำงานกับสตริง อาจมีสถานการณ์ที่ทำให้เราต้องเพิ่มค่าเฉพาะลงในสตริงดังกล่าวแบบไดนามิก เพื่อให้มันยังคงส่งกลับสตริง การดำเนินการนี้เรียกว่าการแก้ไขสตริง
ค่าไดนามิกนี้อาจเป็นตัวแปร สถานะ หรือสิ่งอื่นใดที่มีค่าจริงที่จะฝังอยู่ในสตริง
ในคู่มือนี้ เราจะมาดูวิธีการใช้การแก้ไขสตริงใน React โดยคำนึงถึงอินสแตนซ์ต่างๆ ที่อาจต้องมีการแก้ไขสตริงและวิธีที่สามารถทำได้
การแก้ไขสตริงใน ES5 และ ES6
การแก้ไขสตริงสามารถทำได้สองวิธี: การต่อข้อความและตัวอักษรเทมเพลต แม้ว่าบางคนโต้แย้งว่าการต่อสายอักขระไม่ใช่การแก้ไขสตริง แต่การแก้ไขสตริงหมายถึงความสามารถในการสร้างสตริงโดยทำการแทนที่ตัวยึดตำแหน่ง ซึ่งการต่อสายอักขระทำได้อย่างชัดเจน
ก่อนที่จะมีการแนะนำเทมเพลตลิเทอรัลใน ES6 เราใช้การต่อข้อมูลมาโดยตลอด ซึ่งกลายเป็นเรื่องยากมากเมื่อต้องจัดการกับสตริงแบบหลายบรรทัดที่ต้องการการแทนที่ของตัวแปรหลายตัว เมื่อมีการแนะนำตัวอักษรเทมเพลตใน ES6 พวกเขาได้รับการพิสูจน์แล้วว่าง่ายต่อการใช้งาน โดยเฉพาะอย่างยิ่งสำหรับสตริงที่ยาวกว่าหรือหลายบรรทัดซึ่งเราต้องการฝังนิพจน์
ในคู่มือนี้ เราจะดูทั้งสองวิธีและดำเนินการตัวอย่างด้วยตัวอักษรเทมเพลตซึ่งเป็นแนวทางที่แนะนำ
การแก้ไขสตริงในการตอบสนองด้วยการต่อกัน
วิธีมาตรฐานในการต่อสายคือการใช้ +
โอเปอเรเตอร์รอบตัวแปรหรือสถานะเฉพาะ:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
ในโค้ดด้านบนนี้ เรามีสถานะเป็น fontSize
ซึ่งมีค่าของ large
. เราต้องการให้ดึงข้อมูลคลาสแบบไดนามิก – ตัวอย่างเช่น อาจเป็น text-small
, text-large
, text-medium
, ฯลฯ ขึ้นอยู่กับสถานะ ที่แตกต่างกัน className
จะถูกนำไปใช้กับหัวเรื่อง!
ด้วยการต่อกัน เราจะวางสตริงจริงก่อนแล้วจึงใช้ประโยชน์จาก+
โอเปอเรเตอร์เพื่อสอดแทรกตัวแปรด้วยสตริงจริง ดังนั้นจึงสามารถคืนค่าที่สอดแทรกได้:
วิธีการข้างต้นจะซับซ้อนเมื่อเราเป็นตัวแปรตั้งแต่สองตัวขึ้นไป และโดยเฉพาะอย่างยิ่งถ้าสตริงถูกเพิ่มเข้าไปในสตริงอื่น และไม่ต่อท้าย
การแก้ไขสตริงเพื่อทำปฏิกิริยากับตัวอักษรเทมเพลต
นี่เป็นวิธีที่ดีที่สุดในการจัดการกับการแก้ไขสตริง มันถูกเพิ่มเข้ามาใน ES6 และกลายเป็นวิธีการที่ใช้กันมากที่สุดสำหรับการแก้ไขสตริง การใช้ตัวอักษรเทมเพลตสตริง ให้ทำซ้ำตัวอย่างก่อนหน้านี้:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
ดังที่เราเห็นในโค้ดด้านบนแล้ว เราไม่ได้ใช้ตัวดำเนินการบวกในตัวอักษรเทมเพลตอีกต่อไป แต่เราใช้ backticks สำหรับสตริงทั้งหมด แล้วใช้เครื่องหมายดอลลาร์และวงเล็บปีกกาเพื่อแทรกตัวแปรและค่าไดนามิกของเรา
คำสั่งได้รับการประเมินและ const fontSize
ถูกแทรกเข้าไปในสตริง
มาดูตัวอย่างการแก้ไขสตริง React เพิ่มเติมกัน!
วิธีใช้การแก้ไขสตริงเพื่อส่งค่าสไตล์ใน React
ในสถานการณ์ที่เราจัดเก็บข้อมูลสไตล์ของเราไว้ในตัวแปรที่เราต้องการใช้เพื่อจัดรูปแบบข้อความภายใน React เราสามารถใช้เทมเพลตตามตัวอักษรได้:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ เครื่องหมายดอลลาร์และเครื่องหมายวงเล็บปีกกาถูกใช้เพื่อยึดตัวยึดตำแหน่งของเรา และสิ่งนี้จะคืนค่าสไตล์ด้วยวิธีที่เหมาะสม:
เรายังสามารถทำการประเมินภายในวงเล็บปีกกา สมมติว่าเราต้องการให้ตัวเลขถูกคูณ:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
วิธีใช้ประโยชน์จากการแก้ไขสตริงด้วยนิพจน์ใน React
จนถึงตอนนี้ เราเห็นว่าเราสามารถดำเนินการประเมินได้ สิ่งสำคัญคือต้องทราบด้วยว่าเราสามารถเพิ่มนิพจน์ภายในวงเล็บปีกกาเพื่อให้ได้ค่าที่ถูกต้องตามนิพจน์และใช้งาน:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
วิธีสอดแทรกสตริงหลายบรรทัดด้วยตัวอักษรเทมเพลต
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ เทมเพลตตัวอักษรทำให้ง่ายต่อการเพิ่มตัวยึดตำแหน่งให้กับสตริงที่มีหลายบรรทัด:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
ในโค้ดด้านบน เราจะเห็นว่าการใช้ template literals นั้นง่ายเพียงใดเมื่อเทียบกับการใช้ concatenation:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
วิธีการใช้ตัวดำเนินการเชิงตรรกะด้วยตัวอักษรเทมเพลต
จนถึงตอนนี้ เราได้เห็นวิธีส่งผ่านนิพจน์ด้วยตัวดำเนินการ ternary แล้ว ก็ยังดีที่สุดที่เราเห็นว่าตัวดำเนินการเชิงตรรกะสามารถทำงานกับตัวอักษรเทมเพลตได้:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
สรุป
เราได้เรียนรู้วิธีใช้การแก้ไขสตริงโดยใช้วิธีมาตรฐานสองวิธีในบทความนี้ รวมถึงประสิทธิภาพของตัวอักษรเทมเพลต นับตั้งแต่มีการนำเทมเพลตตัวอักษรมาใช้ คนส่วนใหญ่ชอบใช้เทมเพลตเหล่านี้เนื่องจากความเรียบง่ายในการใช้งานและความสามารถในการอ่านโค้ดที่ดีขึ้นอย่างมาก
- '
- &
- a
- ความสามารถ
- ลงชื่อเข้าใช้
- ประสบความสำเร็จ
- กระทำ
- ที่เพิ่ม
- แม้ว่า
- เสมอ
- อื่น
- app
- ประยุกต์
- เข้าใกล้
- รอบ
- บทความ
- กลายเป็น
- ที่ดีที่สุด
- ดีกว่า
- ชั้น
- รหัส
- เมื่อเทียบกับ
- ซับซ้อน
- ภาชนะ
- มี
- ได้
- สร้าง
- ข้อมูล
- การซื้อขาย
- ทั้งนี้ขึ้นอยู่กับ
- ต่าง
- ยาก
- ดอลลาร์
- พลวัต
- ที่ฝัง
- โดยเฉพาะอย่างยิ่ง
- ฯลฯ
- การประเมินผล
- ตัวอย่าง
- ตัวอย่าง
- การแสดงออก
- ชื่อจริง
- ให้คำแนะนำ
- ถือ
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- ทำอย่างไร
- HTTPS
- การดำเนินการ
- สำคัญ
- ตัวอย่าง
- IT
- ใหญ่
- ได้เรียนรู้
- Line
- เส้น
- ดู
- ทำ
- การทำ
- วิธีการ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- หลาย
- คูณ
- จำนวน
- ผู้ประกอบการ
- ผู้ประกอบการ
- ในสิ่งที่สนใจ
- คน
- ที่มีประสิทธิภาพ
- เกิดปฏิกิริยา
- หมายถึง
- ทำซ้ำ
- ต้องการ
- กลับ
- รับคืน
- กล่าวว่า
- ลงชื่อ
- ตั้งแต่
- สถานการณ์
- So
- บาง
- โดยเฉพาะ
- มาตรฐาน
- สถานะ
- คำแถลง
- ยังคง
- สไตล์
- การ
- พื้นที่
- us
- ใช้
- ความคุ้มค่า
- ต่างๆ
- วิธี
- ภายใน
- งาน
- การทำงาน
- XML
- ปี