ใน JavaScript มีหลายวิธีในการกรองช่องว่างจากสตริง บทความนี้พยายามอธิบายวิธีที่คุณสามารถทำได้ด้วยอักขระช่องว่างในสตริงของคุณ โดยแสดงวิธีการดำเนินการในห้าวิธี:
- การใช้ลูป
- การใช้วิธีการอาร์เรย์:วิธีการแยก/กรอง/เข้าร่วม
- การใช้วิธีการอาร์เรย์:แยก/เข้าร่วม
- การใช้วิธีการแทนที่
การใช้ลูป
เมื่อเราใช้สำหรับลูป เราต้องประกาศตัวแปรสตริงใหม่ก่อนการวนซ้ำ เพื่อให้เราเพิ่มเข้าไปได้
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//loop
let newStr = "";
for(let i = 0; i < str.length; i++) {
if(str[i] !== " ") {
newStr += str[i];
}
}
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html> ลูปจะดูที่อักขระแต่ละตัวเพื่อดูว่าเป็นอักขระช่องว่างหรือไม่ หากไม่เป็นเช่นนั้น ระบบจะเพิ่มลงในตัวแปร newStr เพื่อตอบสนองวัตถุประสงค์ของเราที่นี่ เราแทรกลงใน Document Object Model (DOM) เพื่อให้เราเห็นบนหน้าจอ หากคุณต้องการใช้ที่อื่นในโค้ดของคุณ คุณจะต้องส่งคืนตัวแปร newStr
การใช้วิธีการอาร์เรย์:วิธีการแยก/กรอง/เข้าร่วม
เกี่ยวข้องอย่างใกล้ชิดกับวิธีการวนซ้ำที่อธิบายข้างต้น วิธี split/filter นำสตริง แยกออกเป็นอาร์เรย์ จากนั้นใช้ตัวกรองเมธอด ES6 ที่จะลบช่องว่าง นี่คือวิธีการ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//split/Filter
const splitted = str.split('');
const filtered = splitted.filter(char => {
return char !== " ";
})
let newStr = filtered.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html> การใช้ Array Method:Split/Join
ในส่วนก่อนหน้านี้ เราใช้การแยก กรอง และการรวม เพื่อลบช่องว่างออกจากสตริง ในความเป็นจริง เราต้องใช้เมธอด split และ join ก็ต่อเมื่อเราใช้วิธีอาร์เรย์ สิ่งที่เราต้องทำคือแบ่งพื้นที่แล้วเข้าร่วมตัวละครแต่ละตัว!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//split/join
const splitted = str.split(' ');
let newStr = splitted.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html> ช่างเป็นทางลัดเล็ก ๆ น้อย ๆ ที่น่าสนใจ! คุณสามารถแยกอักขระที่คุณเลือกเพื่อตัดอักขระนั้นออกจากสตริงทั้งหมด แล้วรวมอาร์เรย์กลับเข้าด้วยกันบนอักขระแต่ละตัวเพื่อรับสตริงของคุณ
การใช้วิธีการแทนที่:
วิธีการแทนที่เหมาะมากที่จะใช้เมื่อคุณต้องการใช้ RegEx เพื่อกรองช่องว่างทั้งหมดในสตริงของคุณ เราจำเป็นต้องใช้ RegEx ที่นี่เนื่องจากการแทนที่โดยคำจำกัดความจะแทนที่อินสแตนซ์แรกของสิ่งที่กำลังมองหา ถ้าเรามีหลายช่องว่างในสตริง วิธีการแทนที่จะลบเฉพาะช่องว่างแรก เว้นแต่ว่าเราใช้นิพจน์ทั่วไปเพื่อระบุช่องว่างสีขาว
ค่าสถานะส่วนกลางที่ส่วนท้ายของนิพจน์ทั่วไปคือสิ่งที่ช่วยให้เราค้นหาและแทนที่ได้มากกว่าหนึ่งอินสแตนซ์
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
let regex = /\s+/g
let newStr = str.replace(" ", "");
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
\s คืออักขระช่องว่าง และเครื่องหมาย + แสดงว่าเรากำลังมองหาอักขระช่องว่างตั้งแต่หนึ่งตัวขึ้นไปที่จัดกลุ่มเป็นแถว g ที่ส่วนท้ายของนิพจน์ เพื่อเป็นการเตือนความจำ ระบุว่าเรากำลังมองหาการจัดกลุ่มอักขระช่องว่างที่แตกต่างกันหลายตัว
บทสรุป
ในบทความนี้ เราได้กล่าวถึงสี่วิธีในการนำพื้นที่สีขาวออกจากการจัดเก็บใน JavaScript เราใช้ลูป วิธีกรอง วิธีแยก/รวม และนิพจน์ทั่วไป การเรียนรู้วิธีทำสิ่งพื้นฐานเหล่านี้ใน JavaScript จะทำให้คุณมีเครื่องมือที่จำเป็นในการแก้ปัญหาที่ซับซ้อนยิ่งขึ้นใน JavaScript ขณะที่คุณก้าวหน้าในการเดินทาง!
