String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()Строковые методы поиска рассматриваются в следующей главе.
Свойство length возвращает длину строки:
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The length Property</h2>
<p>The length of the string is:</p>
<p id="demo"></p>
<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>
Существует 3 метода извлечения части строки:
slice(start, end)
substring(start, end)
substr(start, length)
slice() извлекает часть строки и возвращает извлеченная часть в новой строке.
Метод принимает 2 параметра: начальную позицию и конечную позицию (конец не включается).
Вырежьте часть строки от позиции 7 до позиции 13:
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
JavaScript считает позиции с нуля.
Первая позиция — 0.
Вторая позиция - 1.
Если вы опустите второй параметр, метод вырежет остальную часть строки:
let text = "Apple, Banana, Kiwi";
let part = text.slice(7);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>Extract a part of a string from position 7:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
Если параметр отрицательный, позиция отсчитывается от конца строки:
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>Extract a part of a string counting from the end:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
В этом примере вырезается часть строки с позиции -12 до позиции -6:
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>Extract a part of a string and return the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>
substring() аналогичен slice().
Разница в том, что начальные и конечные значения меньше 0 рассматриваются как 0 в substring().
let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>
</body>
</html>
Если вы опустите второй параметр, substring() вырежет остальную часть нить.
substr() аналогичен slice().
Разница в том, что второй параметр определяет длину извлеченной части.
let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>
</body>
</html>
Если вы опустите второй параметр, substr() вырежет остальную часть нить.
let str = "Apple, Banana, Kiwi";
let part = str.substr(7);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>
</body>
</html>
Если первый параметр отрицательный, позиция отсчитывается с конца нить.
let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>
</body>
</html>
Метод replace() заменяет указанное значение другим. значение в строке:
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>
Метод replace() не меняет строку, для которой он вызывается.
Метод replace() возвращает новую строку.
Метод replace() заменяет только первое совпадение.
Если вы хотите заменить все совпадения, используйте регулярное выражение с установленным флагом /g. См. примеры ниже.
По умолчанию метод replace() заменяет только первое совпадение:
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>
По умолчанию метод replace() чувствителен к регистру. Написание MICROSOFT (с верхний регистр) не будет работать:
let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("MICROSOFT","W3Schools");
}
</script>
<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>
</body>
</html>
Чтобы заменить регистронезависимый, используйте регулярное выражение с флагом /i (нечувствительный):
let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/MICROSOFT/i,"W3Schools");
}
</script>
</body>
</html>
Регулярные выражения пишутся без кавычек.
Чтобы заменить все совпадения, используйте регулярное выражение с флагом /g (глобальное совпадение):
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/Microsoft/g,"W3Schools");
}
</script>
</body>
</html>
Вы узнаете больше о регулярных выражениях в главе JavaScript Regular. Выражения.
В 2021 году в JavaScript появился строковый метод replaceAll():
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>
<p>ES2021 intoduced the string method replaceAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Метод replaceAll() позволяет указать регулярное выражение вместо заменяемой строки.
Если параметр является регулярным выражением, должен быть установлен глобальный флаг (g), в противном случае выдается TypeError.
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>
<p>ES2021 intoduced the string method replaceAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
replaceAll() — это функция ES2021.
replaceAll() не работает в Internet Explorer.
Строка преобразуется в верхний регистр с помощью toUpperCase():
Строка преобразуется в нижний регистр с помощью toLowerCase():
let text1 = "Hello World!";
let text2 = text1.toUpperCase();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toUpperCase();
}
</script>
</body>
</html>
let text1 = "Hello World!"; // String
let text2 = text1.toLowerCase(); // text2 is text1
converted to lowerПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Convert string to lower case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toLowerCase();
}
</script>
</body>
</html>
concat() объединяет две или более строки:
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String</h1>
<h2>The concat() Method</h2>
<p>The concat() method joins two or more strings:</p>
<p id="demo"></p>
<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>
</body>
</html>
Вместо оператора плюс можно использовать метод concat(). Эти две строки делают то же самое:
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");Все строковые методы возвращают новую строку. Они не изменяют исходную строку.
Формально сказал:
Строки неизменяемы: строки нельзя изменить, их можно только заменить.
Метод trim() удаляет пробелы с обеих сторон строки:
let text1 = " Hello World! ";
let text2 = text1.trim();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trim();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
ECMAScript 2019 добавил в JavaScript метод String trimStart(). <p>Метод trimStart() работает аналогично trim(), но удаляет пробелы только в начале строка.
let text1 = " Hello World! ";
let text2 = text1.trimStart();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimStart();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
Строка JavaScript trimStart() поддерживается во всех современных браузерах с января 2020 года:
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
| Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ECMAScript 2019 добавил в JavaScript строковый метод trimEnd(). <p>Метод trimEnd() работает аналогично trim(), но удаляет пробелы только с конца строка.
let text1 = " Hello World! ";
let text2 = text1.trimEnd();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
Строка JavaScript trimEnd() поддерживается во всех современных браузерах с января 2020 года:
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
| Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ECMAScript 2017 добавил в JavaScript два новых строковых метода: padStart() и padEnd() для поддержки заполнения в начале и в конце строки.
Метод padStart() дополняет строку с начала.
Он дополняет строку другой строкой (несколько раз), пока не достигнет заданной длины.
Дополните строку «0», пока она не достигнет длины 4:
let text = "5";
let padded = text.padStart(4,"0");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
text = text.padStart(4,"0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Дополните строку знаком «x», пока она не достигнет длины 4:
let text = "5";
let padded = text.padStart(4,"x");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>
</body>
</html>
Метод padStart() является строковым методом.
Чтобы дополнить число, сначала преобразуйте его в строку.
См. пример ниже.
let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>
</body>
</html>
padStart() — это функция ECMAScript 2017.
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
padStart() не поддерживается в Internet Explorer.
Метод padEnd() дополняет строку с конца.
Он дополняет строку другой строкой (несколько раз), пока не достигнет заданной длины.
let text = "5";
let padded = text.padEnd(4,"0");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>
<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
text = text.padEnd(4,"0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
let text = "5";
let padded = text.padEnd(4,"x");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>
<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>
</body>
</html>
Метод padEnd() является строковым методом.
Чтобы дополнить число, сначала преобразуйте его в строку.
См. пример ниже.
let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>
<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>
<p id="demo"></p>
<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>
</body>
</html>
padEnd() — это функция ECMAScript 2017.
Он поддерживается во всех современных браузерах:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
padEnd() не поддерживается в Internet Explorer.
Существует 3 метода извлечения строковых символов:
charAt(position)
charCodeAt(position)
Доступ к собственности [ ]
Метод charAt() возвращает символ в указанном месте. индекс (позиция) в строке:
let text = "HELLO WORLD";
let char = text.charAt(0);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String</h1>
<h2>The charAt() Method</h2>
<p>The charAt() method returns the character at a given position in a string:</p>
<p id="demo"></p>
<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>
</body>
</html>
Метод charCodeAt() возвращает юникод символа. по указанному индексу в строке:
Метод возвращает код UTF-16 (целое число от 0 до 65535).
let text = "HELLO WORLD";
let char = text.charCodeAt(0);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String</h1>
<h2>The charCodeAt() Method</h2>
<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>
</body>
</html>
ECMAScript 5 (2009) разрешает доступ к свойствам [ ] строк:
let text = "HELLO WORLD";
let char = text[0];Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Property access on strings:</p>
<p>The first character in the string is:</p>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>
Доступ к собственности может быть немного непредсказуемым.
Это делает строки похожими на массивы (но это не так)
Если символ не найден, [ ] возвращает неопределенное значение, а charAt() возвращает пустую строку.
Он доступен только для чтения. str[0]="A" не выдаёт ошибок (но не работает!)
let text = "HELLO WORLD";
text[0] = "A"; // Gives no error, but does not workПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>Property acces on strings are read only:</p>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
text[0] = "A"; // Does not work
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Если вы хотите работать со строкой как с массивом, вы можете преобразовать ее в массив.
Строку можно преобразовать в массив с помощью метода split():
text.split(",") // Split on commas
text.split(" ") // Split on spaces
text.split("|") // Split on pipeПопробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Display the first array element, after a string split:</p>
<p id="demo"></p>
<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>
</body>
</html>
Если разделитель опущен, возвращаемый массив будет содержать всю строку. в индексе [0].
Если разделителем является «», возвращаемый массив будет массивом одиночных персонажи:
text.split("")Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<h2>The split().Method</h2>
<p id="demo"></p>
<script>
let text = "Hello";
const myArr = text.split("");
text = "";
for (let i = 0; i < myArr.length; i++) {
text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Для получения полной справки по строкам перейдите по ссылке:
Полное руководство по строкам JavaScript.
Справочник содержит описания и примеры всех строковых свойств и методов.