String.startsWith() в JavaScript — чи починається рядок із підрядка

Загальний опис

String.prototype.startsWith() - це метод, який дозволяє перевірити, чи починається рядок з певних символів. Цей метод повертає true або false в залежності від того, чи рядок починається з заданого шаблону. startsWith() є корисним для валідації рядків, особливо коли ми працюємо з форматами даних або шукаємо специфічні префікси в тексті.

Використання startsWith():

1. Основний приклад:

   let str = "Hello World";
   console.log(str.startsWith("Hello")); // true
   console.log(str.startsWith("World")); // false
   

   Тут startsWith() перевіряє, чи починається рядок str з "Hello".

2. Використання з позицією початку:

   let str = "Hello World";
   console.log(str.startsWith("World", 6)); // true
   

   У цьому прикладі, startsWith() перевіряє, чи починається рядок str з "World" починаючи з 6-го символу.

Особливості та практичне використання:

• Розрізнення регістра: startsWith() чутливий до регістра, тому "hello" та "Hello" будуть вважатися різними.
• Використання умовних конструкцій: Часто використовується в if умовах для перевірки, чи рядок відповідає певному критерію.
• Поєднання з іншими методами рядків: Цей метод може використовуватися разом з іншими методами, такими як toLowerCase() або toUpperCase(), для покращення гнучкості перевірок.

Приклад з урахуванням регістра:

let greeting = "Hello, how are you?";
if (greeting.toLowerCase().startsWith("hello")) {
    console.log("The greeting starts with 'hello'");
}
// Виведе: "The greeting starts with 'hello'"

У цьому прикладі, перед тим як викликати startsWith(), ми використовуємо toLowerCase() для того, щоб зробити перевірку незалежною від регістра. Це демонструє, як можна поєднувати startsWith() з іншими методами для досягнення бажаного результату.

правити

Порада

String.prototype.startsWith() можна ефективно використовувати в умовних конструкціях для визначення, чи потрібно виконувати певний блок коду. Наприклад, if (fileName.startsWith("temp_")) { // обробка тимчасових файлів } дозволяє легко відсортувати файли за назвами.

автор: Bond правити

Порада

Важливо пам'ятати, що startsWith() чутливий до регістру символів. Тому, перш ніж порівнювати, варто привести рядок до потрібного регістру за допомогою toLowerCase() або toUpperCase(), щоб уникнути неочікуваних результатів.

автор: Bond правити

Порада

Метод startsWith() може приймати другий аргумент, який вказує позицію у рядку, з якої починати пошук. Це може бути корисно для пошуку підрядка не з самого початку рядка, наприклад: str.startsWith("world", 6) перевірить, чи починається рядок str зі слова "world" починаючи з 7-го символу.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

startsWith(searchString)
startsWith(searchString, position)

Параметри

searchString

Рядок, який буде шукатися на початку цього рядка. Не може бути регулярним виразом. Усі значення, що не є регулярними виразами, будуть приведені до рядкового типу. Якщо аргумент не вказаний або вказаний як undefined, startsWith() буде шукати рядок "undefined", що рідко є бажаним результатом.

автор: Bond

правити

position

Початкова позиція, з якої очікується знаходження searchString (індекс першого символу searchString). За замовчуванням дорівнює 0.

автор: Bond

правити

Повернення

bool

Повертає булеве значення true, якщо заданий підрядок знаходиться на початку вихідного рядка, включаючи випадки, коли searchString є порожнім рядком; в інших випадках повертає false.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	41	17	9	28	12	—

Підтримка: мобільні переглядачі

Переглядач
	37	36	17	9

Підтримка: серверні переглядачі

Переглядач
	4.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

let email = "[email protected]";
let isEmail = email.startsWith("example");

console.log(isEmail); // Виводить: true

<header>
  <h2 class="title">String.prototype.startsWith()</h2>
  <p class="description">Перевіряє, чи рядок починається з вказаного префікса.</p>
</header>
<main>
  <div class="input-area">
    <input type="text" id="inputString" placeholder="Введіть рядок">
    <input type="text" id="prefix" placeholder="Введіть префікс"><br><br>
    <button onclick="checkPrefix()">Перевірити</button>
  </div>
  <div class="result" id="result"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.input-area {
  margin-bottom: 15px;
}

.input-area input[type="text"] {
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
}

.input-area button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.input-area button:hover {
  background-color: #45a049;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function checkPrefix() {
  let inputString = document.getElementById('inputString').value;
  let prefix = document.getElementById('prefix').value;
  let result = inputString.startsWith(prefix);

  document.getElementById('result').innerText = result ? "Так, рядок починається з цього префікса." : "Ні, рядок не починається з цього префікса.";
}
//# sourceURL=pen.js

let transactionId = "ID123456";
let hasIDPrefix = transactionId.startsWith("ID", 0); // Перевірка на "ID" на початку

console.log(hasIDPrefix); // Виводить: true

let hasNumberPrefix = transactionId.startsWith("123", 2); // Перевірка на "123" починаючи з 3-ї позиції (індекс 2)

console.log(hasNumberPrefix); // Виводить: true