Работа со строками в javascript

Examples

Using

The following example uses to display characters from the string :


var anyString = 'Mozilla';

// Displays 'Moz'
console.log(anyString.substring(0, 3));
console.log(anyString.substring(3, 0));

// Displays 'lla'
console.log(anyString.substring(4, 7));
console.log(anyString.substring(4));
console.log(anyString.substring(7, 4));

// Displays 'Mozill'
console.log(anyString.substring(0, 6));

// Displays 'Mozilla'
console.log(anyString.substring(0, 7));
console.log(anyString.substring(0, 10));

Using with property

// Displays 'illa' the last 4 characters
var anyString = 'Mozilla';
var anyString4 = anyString.substring(anyString.length - 4);
console.log(anyString4);

// Displays 'zilla' the last 5 characters
var anyString = 'Mozilla';
var anyString5 = anyString.substring(anyString.length - 5);
console.log(anyString5);

Replacing a substring within a string

The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string into .

// Replaces oldS with newS in the string fullS
function replaceString(oldS, newS, fullS) {
  for (var i = 0; i < fullS.length; ++i) {
    if (fullS.substring(i, i + oldS.length) == oldS) {
      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
    }
  }
  return fullS;
}

replaceString('World', 'Web', 'Brave New World');

Note that this can result in an infinite loop if is itself a substring of  — for example, if you attempted to replace ‘World’ with ‘OtherWorld’ here. A better method for replacing strings is as follows:

function replaceString(oldS, newS, fullS) {
  return fullS.split(oldS).join(newS);
}

Quotes

Let’s recall the kinds of quotes.

Strings can be enclosed within either single quotes, double quotes or backticks:

Single and double quotes are essentially the same. Backticks, however, allow us to embed any expression into the string, by wrapping it in :

Another advantage of using backticks is that they allow a string to span multiple lines:

Looks natural, right? But single or double quotes do not work this way.

If we use them and try to use multiple lines, there’ll be an error:

Single and double quotes come from ancient times of language creation when the need for multiline strings was not taken into account. Backticks appeared much later and thus are more versatile.

Backticks also allow us to specify a “template function” before the first backtick. The syntax is: . The function is called automatically, receives the string and embedded expressions and can process them. This is called “tagged templates”. This feature makes it easier to implement custom templating, but is rarely used in practice. You can read more about it in the .

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Спецсимволы

Многострочные строки также можно создавать с помощью одинарных и двойных кавычек, используя так называемый «символ перевода строки», который записывается как :

В частности, эти две строки эквивалентны, просто записаны по-разному:

Есть и другие, реже используемые спецсимволы. Вот список:

Символ Описание
Перевод строки
Возврат каретки: самостоятельно не используется. В текстовых файлах Windows для перевода строки используется комбинация символов .
, Кавычки
Обратный слеш
Знак табуляции
, , Backspace, Form Feed и Vertical Tab — оставлены для обратной совместимости, сейчас не используются.
Символ с шестнадцатеричным юникодным кодом , например, — то же самое, что .
Символ в кодировке UTF-16 с шестнадцатеричным кодом , например, — юникодное представление знака копирайта, . Код должен состоять ровно из 4 шестнадцатеричных цифр.
(от 1 до 6 шестнадцатеричных цифр) Символ в кодировке UTF-32 с шестнадцатеричным кодом от U+0000 до U+10FFFF. Некоторые редкие символы кодируются двумя 16-битными словами и занимают 4 байта. Так можно вставлять символы с длинным кодом.

Примеры с Юникодом:

Все спецсимволы начинаются с обратного слеша, — так называемого «символа экранирования».

Он также используется, если необходимо вставить в строку кавычку.

К примеру:

Здесь перед входящей в строку кавычкой необходимо добавить обратный слеш —  — иначе она бы обозначала окончание строки.

Разумеется, требование экранировать относится только к таким же кавычкам, как те, в которые заключена строка. Так что мы можем применить и более элегантное решение, использовав для этой строки двойные или обратные кавычки:

Заметим, что обратный слеш служит лишь для корректного прочтения строки интерпретатором, но он не записывается в строку после её прочтения. Когда строка сохраняется в оперативную память, в неё не добавляется символ . Вы можете явно видеть это в выводах в примерах выше.

Но что, если нам надо добавить в строку собственно сам обратный слеш ?

Это можно сделать, добавив перед ним… ещё один обратный слеш!

Получение подстроки

В JavaScript есть 3 метода для получения подстроки: , и .


Возвращает часть строки от до (не включая) .

Например:

Если аргумент отсутствует, возвращает символы до конца строки:

Также для можно задавать отрицательные значения. Это означает, что позиция определена как заданное количество символов с конца строки:

Возвращает часть строки между и .

Это — почти то же, что и , но можно задавать больше .

Например:

Отрицательные значения , в отличие от , не поддерживает, они интерпретируются как .

Возвращает часть строки от длины .

В противоположность предыдущим методам, этот позволяет указать длину вместо конечной позиции:

Значение первого аргумента может быть отрицательным, тогда позиция определяется с конца:

Давайте подытожим, как работают эти методы, чтобы не запутаться:

метод выбирает… отрицательные значения
от до (не включая ) можно передавать отрицательные значения
между и отрицательные значения равнозначны
символов, начиная от значение может быть отрицательным

Какой метод выбрать?

Все эти методы эффективно выполняют задачу. Формально у метода есть небольшой недостаток: он описан не в собственно спецификации JavaScript, а в приложении к ней — Annex B. Это приложение описывает возможности языка для использования в браузерах, существующие в основном по историческим причинам. Таким образом, в другом окружении, отличном от браузера, он может не поддерживаться. Однако на практике он работает везде.

Из двух других вариантов, более гибок, он поддерживает отрицательные аргументы, и его короче писать. Так что, в принципе, можно запомнить только его.

Метод slice ()

slice () извлекает часть строки и возвращает извлеченную часть в новой строке.

Метод принимает 2 параметра: начальный индекс (положение) и Конечный индекс (позиция).

Этот пример нарезает часть строки из позиции 7 в положение 13:

var str = «Apple, Banana, Kiwi»; var res = str.slice(7, 13);

The result of res will be:

Banana

Если параметр имеет отрицательное значение, позиция учитывается от конца строки.

Этот пример нарезает часть строки из позиции-12 в положение-6:

var str = «Apple, Banana, Kiwi»; var res = str.slice(-12, -6);


The result of res will be:

Banana

Если опустить второй параметр, метод выполнит срез оставшейся части строки:

var res = str.slice(7);

или, считая с конца:

String HTML Wrapper Methods

The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.

These are not standard methods, and may not work as expected in all browsers.

Method Description
anchor() Creates an anchor
big() Displays a string using a big font
blink() Displays a blinking string
bold() Displays a string in bold
fixed() Displays a string using a fixed-pitch font
fontcolor() Displays a string using a specified color
fontsize() Displays a string using a specified size
italics() Displays a string in italic
link() Displays a string as a hyperlink
small() Displays a string using a small font
strike() Displays a string with a strikethrough
sub() Displays a string as subscript text
sup() Displays a string as superscript text

More Examples

Example

Using the start parameter with different positive and negative numbers:

<?phpecho substr(«Hello world»,10).»<br>»;echo substr(«Hello world»,1).»<br>»;echo substr(«Hello world»,3).»<br>»;echo substr(«Hello world»,7).»<br>»;echo substr(«Hello world»,-1).»<br>»;echo substr(«Hello world»,-10).»<br>»;echo substr(«Hello world»,-8).»<br>»; echo substr(«Hello world»,-4).»<br>»;?>

Example

Using the start and length parameters with different positive and negative numbers:

<?phpecho substr(«Hello world»,0,10).»<br>»;echo substr(«Hello world»,1,8).»<br>»;echo substr(«Hello world»,0,5).»<br>»;echo substr(«Hello world»,6,6).»<br>»;echo substr(«Hello world»,0,-1).»<br>»;echo substr(«Hello world»,-10,-2).»<br>»;echo substr(«Hello world»,0,-6).»<br>»;?>

Finding a String in a String

The method returns the index of (the position of) the occurrence of a specified text in a string:

var str = «Please locate where ‘locate’ occurs!»; var pos = str.indexOf(«locate»);

JavaScript counts positions from zero.0 is the first position in a string, 1 is the second, 2 is the third …

The method returns the index of the last occurrence of a specified text in a string:

var str = «Please locate where ‘locate’ occurs!»; var pos = str.lastIndexOf(«locate»);

Both , and return -1 if the text is not found.

var str = «Please locate where ‘locate’ occurs!»; var pos = str.lastIndexOf(«John»);

Both methods accept a second parameter as the starting position for the search:

var str = «Please locate where ‘locate’ occurs!»; var pos = str.indexOf(«locate», 15);

The methods searches backwards (from the end to the beginning), meaning: if the second parameter is , the search starts at position 15, and searches to the beginning of the string.

Некоторые другие методы

У строковых переменных есть еще пара полезных и часто используемых методов, это:

str.trim()

убирает пробелы в начале и конце строки:

let str = "   string   ";
console.log( str.trim() );

И

str.repeat(n)

для повторения строки n раз:

let str = "Abc";
console.log( str.repeat(5) );

Это, конечно, не все методы строк. По мере использования JavaScript вы познакомитесь со многими другими, но для начала этого будет достаточно. Также отдельно стоит тема регулярных выражений – мощнейший инструмент для поиска, замены и проверки различных строковых шаблонов, но об этом мы будем говорить на отдельном занятии.

Видео по теме

JavaScipt #1: что это такое, с чего начать, как внедрять и запускать

JavaScipt #2: способы объявления переменных и констант в стандарте ES6+

JavaScript #3: примитивные типы number, string, Infinity, NaN, boolean, null, undefined, Symbol

JavaScript #4: приведение типов, оператор присваивания, функции alert, prompt, confirm

JavaScript #5: арифметические операции: +, -, *, /, **, %, ++, —


JavaScript #6: условные операторы if и switch, сравнение строк, строгое сравнение

JavaScript #7: операторы циклов for, while, do while, операторы break и continue

JavaScript #8: объявление функций по Function Declaration, аргументы по умолчанию

JavaScript #9: функции по Function Expression, анонимные функции, callback-функции

JavaScript #10: анонимные и стрелочные функции, функциональное выражение

JavaScript #11: объекты, цикл for in

JavaScript #12: методы объектов, ключевое слово this

JavaScript #13: клонирование объектов, функции конструкторы

JavaScript #14: массивы (array), методы push, pop, shift, unshift, многомерные массивы

JavaScript #15: методы массивов: splice, slice, indexOf, find, filter, forEach, sort, split, join

JavaScript #16: числовые методы toString, floor, ceil, round, random, parseInt и другие

JavaScript #17: методы строк — length, toLowerCase, indexOf, includes, startsWith, slice, substring

JavaScript #18: коллекции Map и Set

JavaScript #19: деструктурирующее присваивание

JavaScript #20: рекурсивные функции, остаточные аргументы, оператор расширения

JavaScript #21: замыкания, лексическое окружение, вложенные функции

JavaScript #22: свойства name, length и методы call, apply, bind функций

JavaScript #23: создание функций (new Function), функции setTimeout, setInterval и clearInterval

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

The substring( ) Method

Let’s start with the substring( ) method. This method basically gets a part of the original string and returns it as a new string. The substring method expects two parameters:

  • startIndex: represents the starting point of the substring
  • endIndex: represents the ending point of the substring (optional)

Let’s see the usage in an example. Suppose that we have the example string below:

Now if we set the startIndex as 0 and the endIndex as 10, then we will get the first 10 characters of the original string:

However, if we set only a starting index and no ending index for this example:

Then we get a substring starting from the 6th character until the end of the original string.

Some additional points:

  • If startIndex = endIndex, the substring method returns an empty string
  • If startIndex and endIndex are both greater than the length of the string, it returns an empty string
  • If startIndex > endIndex, then the substring method swaps the arguments and returns a substring, assuming as the endIndex > startIndex

String Methods

Method Description
charAt() Returns the character at the specified index (position)
charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a new joined strings
endsWith() Checks whether a string ends with specified string/characters
fromCharCode() Converts Unicode values to characters
includes() Checks whether a string contains the specified string/characters
indexOf() Returns the position of the first found occurrence of a specified value in a string
lastIndexOf() Returns the position of the last found occurrence of a specified value in a string
localeCompare() Compares two strings in the current locale
match() Searches a string for a match against a regular expression, and returns the matches
repeat() Returns a new string with a specified number of copies of an existing string
replace() Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced
search() Searches a string for a specified value, or regular expression, and returns the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
startsWith() Checks whether a string begins with specified characters
substr() Extracts the characters from a string, beginning at a specified start position, and through the specified number of character
substring() Extracts the characters from a string, between two specified indices
toLocaleLowerCase() Converts a string to lowercase letters, according to the host’s locale
toLocaleUpperCase() Converts a string to uppercase letters, according to the host’s locale
toLowerCase() Converts a string to lowercase letters
toString() Returns the value of a String object
toUpperCase() Converts a string to uppercase letters
trim() Removes whitespace from both ends of a string
valueOf() Returns the primitive value of a String object

All string methods return a new value. They do not change the original variable.


С этим читают