ค้นหาสตริง JavaScript

สารบัญ

    แสดงสารบัญ

วิธีการค้นหาสตริง

    

  • String indexOf()
    • 

  • String lastIndexOf()
    • 

  • String search()
    • 

  • String match()
    • 

  • String matchAll()
    • 

  • String includes()
    • 

  • String startsWith()
    • 

  • String endsWith()
    •

สตริง JavaScript indexOf()

indexOf() วิธีการส่งกลับ index (ตำแหน่ง) ครั้งแรก การเกิดขึ้นของสตริงในสตริง:

ตัวอย่าง

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

บันทึก

JavaScript นับตำแหน่งจากศูนย์

0 คือตำแหน่งแรกใน a สตริง 1 คืออันที่สอง 2 คืออันที่สาม ...

สตริง JavaScript LastIndexOf()

lastIndexOf() วิธีการส่งกลับ index ของ สุดท้าย การเกิดขึ้นของข้อความที่ระบุในสตริง:

ตัวอย่าง

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The position of the last occurrence of "locate" is:</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

ทั้ง indexOf() และ lastIndexOf() ส่งคืน -1 หากไม่พบข้อความ:

ตัวอย่าง

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("John");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>Both indexOf() and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

ทั้งสองวิธียอมรับพารามิเตอร์ตัวที่สองเป็นตำแหน่งเริ่มต้นสำหรับ ค้นหา:

ตัวอย่าง

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

วิธีการ lastIndexOf() จะค้นหาแบบย้อนกลับ (ตั้งแต่ต้นจนจบ) แปลว่า หากพารามิเตอร์ตัวที่สองคือ 15 การค้นหาจะเริ่มต้นที่ตำแหน่ง 15 และค้นหาจนถึงจุดเริ่มต้นของสตริง

ตัวอย่าง

let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate", 15);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

ค้นหาสตริง JavaScript()

search() วิธีการค้นหาสตริงสำหรับสตริง (หรือนิพจน์ทั่วไป) และคืนตำแหน่งของการแข่งขัน:

ตัวอย่าง

let text = "Please locate where 'locate' occurs!";
text.search("locate");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>


let text = "Please locate where 'locate' occurs!";
text.search(/locate/);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>Return the position of the first occurrence of a regular expression:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

คุณสังเกตเห็นไหม?

สองวิธี indexOf() และ search() นั้น เท่ากันหรือไม่

พวกเขายอมรับอาร์กิวเมนต์เดียวกัน (พารามิเตอร์) และส่งกลับค่าเดียวกันหรือไม่

ทั้งสองวิธี ไม่ เท่ากัน นี่คือความแตกต่าง:

  • วิธีการ search() ไม่สามารถใช้อาร์กิวเมนต์ตำแหน่งเริ่มต้นที่สองได้

  • ไม่สามารถรับวิธี indexOf() ได้ ค่าการค้นหาที่มีประสิทธิภาพ (นิพจน์ปกติ)

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ นิพจน์ทั่วไปในบทต่อๆ ไป

การจับคู่สตริง JavaScript()

match() วิธีการส่งกลับอาร์เรย์ที่มีผลลัพธ์ของการจับคู่ สตริงเทียบกับสตริง (หรือนิพจน์ทั่วไป)

ตัวอย่าง

ค้นหาคำว่า "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match("ain");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

ค้นหาคำว่า "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

</script>

</body>
</html>

ทำการค้นหาทั่วโลกสำหรับ "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/g);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

ทำการค้นหา "ain" โดยไม่คำนึงถึงขนาดตัวพิมพ์ทั่วโลก:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/gi);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global, case-insensitive search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

บันทึก

หากนิพจน์ทั่วไปไม่มีตัวแก้ไข g (การค้นหาทั่วโลก) match() จะส่งกลับเฉพาะการจับคู่แรกในสตริง

อ่านเพิ่มเติมเกี่ยวกับนิพจน์ทั่วไปในบท JS RegExp

สตริง JavaScript matchAll()

matchAll() วิธีการส่งคืนตัววนซ้ำที่มีผลลัพธ์ของการจับคู่ สตริงเทียบกับสตริง (หรือนิพจน์ทั่วไป)

ตัวอย่าง

const iterator = text.matchAll("Cats");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

หากพารามิเตอร์เป็นนิพจน์ทั่วไป จะต้องตั้งค่าสถานะโกลบอล (g) มิฉะนั้น TypeError ถูกส่งออกไป

ตัวอย่าง

const iterator = text.matchAll(/Cats/g);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

หากคุณต้องการค้นหาโดยไม่คำนึงถึงขนาดตัวพิมพ์ จะต้องตั้งค่าแฟล็กที่ไม่คำนึงถึงตัวพิมพ์ (i):

ตัวอย่าง

const iterator = text.matchAll(/Cats/gi);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

หมายเหตุ

matchAll() เป็นคุณสมบัติ ES2020

matchAll() ไม่ทำงานใน Internet Explorer

สตริง JavaScript รวมถึง()

includes() วิธีการคืนค่าเป็นจริงหากสตริงมีค่าที่ระบุ

มิฉะนั้นจะส่งกลับ false

ตัวอย่าง

ตรวจสอบว่าสตริงมี "world" หรือไม่:

let text = "Hello world, welcome to the universe.";
text.includes("world");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

ตรวจสอบว่าสตริงมี "world" หรือไม่ เริ่มต้นที่ตำแหน่ง 12:

let text = "Hello world, welcome to the universe.";
text.includes("world", 12);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world" starting from position 12:</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>

</body>
</html>

หมายเหตุ

includes() คำนึงถึงขนาดตัวพิมพ์

includes() เป็นคุณลักษณะ ES6

includes() ไม่ได้รับการสนับสนุนใน Internet Explorer

สตริง JavaScript เริ่มต้นด้วย()

startsWith() วิธีการส่งคืน true หากสตริงเริ่มต้นด้วยค่าที่ระบุ

มิฉะนั้นจะส่งกลับ false:

ตัวอย่าง

คืนค่าจริง:

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

ส่งคืนเท็จ:

let text = "Hello world, welcome to the universe.";
text.startsWith("world")

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world");
</script>

</body>
</html>

สามารถระบุตำแหน่งเริ่มต้นสำหรับการค้นหาได้:

ส่งคืนเท็จ:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 5);
</script>

</body>
</html>

คืนค่าจริง:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>

</body>
</html>

หมายเหตุ

startsWith() คำนึงถึงขนาดตัวพิมพ์

startsWith() เป็นคุณลักษณะ ES6

startsWith() ไม่ได้รับการสนับสนุนใน Internet Explorer

สตริง JavaScript สิ้นสุดด้วย()

endsWith() วิธีการส่งกลับ true หากสตริงลงท้ายด้วยค่าที่ระบุ

มิฉะนั้นจะส่งกลับ false:

ตัวอย่าง

ตรวจสอบว่าสตริงลงท้ายด้วย "Doe" หรือไม่:

let text = "John Doe";
text.endsWith("Doe");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

ตรวจสอบว่าอักขระ 11 ตัวแรกของสตริงลงท้ายด้วย "world" หรือไม่:

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check in the 11 first characters of a string ends with "world":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>

</body>
</html>

หมายเหตุ

endsWith() คำนึงถึงขนาดตัวพิมพ์

endsWith() เป็นคุณลักษณะ ES6

endsWith() ไม่ได้รับการสนับสนุนใน Internet Explorer

การอ้างอิงสตริงที่สมบูรณ์

สำหรับการอ้างอิงสตริงที่สมบูรณ์ โปรดไปที่:

อ้างอิงสตริง JavaScript ที่สมบูรณ์

การอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของคุณสมบัติสตริงและวิธีการทั้งหมด