Перлы языка JavaScript строки, массивы и непонятные моменты


Оглавление (нажмите, чтобы открыть):

Строки

В JavaScript любые текстовые данные являются строками. Не существует отдельного типа «символ», который есть в ряде других языков.

Внутренний формат для строк — всегда UTF-16, вне зависимости от кодировки страницы.

Кавычки

В JavaScript есть разные типы кавычек.

Строку можно создать с помощью одинарных, двойных либо обратных кавычек:

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в $ <…>:

Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, вот так:

Выглядит вполне естественно, не правда ли? Что тут такого? Но если попытаться использовать точно так же одинарные или двойные кавычки, то будет ошибка:

Одинарные и двойные кавычки в языке с незапамятных времён: тогда потребность в многострочных строках не учитывалась. Что касается обратных кавычек, они появились существенно позже, и поэтому они гибче.

Обратные кавычки также позволяют задавать «шаблонную функцию» перед первой обратной кавычкой. Используемый синтаксис: func`string` . Автоматически вызываемая функция func получает строку и встроенные в неё выражения и может их обработать. Подробнее об этом можно прочитать в документации. Если перед строкой есть выражение, то шаблонная строка называется «теговым шаблоном». Это позволяет использовать свою шаблонизацию для строк, но на практике теговые шаблоны применяются редко.

Спецсимволы

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

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

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

Символ Описание
\n Перевод строки
\r Возврат каретки: самостоятельно не используется. В текстовых файлах Windows для перевода строки используется комбинация символов \r\n .
\’ , \» Кавычки
\\ Обратный слеш
\t Знак табуляции
\b , \f , \v Backspace, Form Feed и Vertical Tab — оставлены для обратной совместимости, сейчас не используются.
\xXX Символ с шестнадцатеричным юникодным кодом XX , например, ‘\x7A’ — то же самое, что ‘z’ .
\uXXXX Символ в кодировке UTF-16 с шестнадцатеричным кодом XXXX , например, \u00A9 — юникодное представление знака копирайта, © . Код должен состоять ровно из 4 шестнадцатеричных цифр.
\u (от 1 до 6 шестнадцатеричных цифр) Символ в кодировке UTF-32 с шестнадцатеричным кодом от U+0000 до U+10FFFF. Некоторые редкие символы кодируются двумя 16-битными словами и занимают 4 байта. Так можно вставлять символы с длинным кодом.

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

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

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

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

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

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

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

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

Задачи на функции работы со строками в JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

  • Урок №
    Введение, задач нет
  • Урок №
    Работа с регулярными
    выражениями. Глава 1.
  • Урок №
    Работа с регулярными
    выражениями. Глава 2.
  • Урок №
    Работа с регулярными
    выражениями. Глава 3.
  • Урок №
    Работа с регулярными
    выражениям. Глава 4.
  • Урок №
    Отличия
    от PHP версии

Разное

Работа с канвасом

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с canvas
  • Урок №
    Продвинутая
    работа с canvas

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript
    Работа с
    AJAX + PHP

Контекст

  • Урок №
    Введение, задач нет
  • Урок №
    Продвинутая
    работа с контекстом

Drag-and-Drop

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Перед решением задач изучите теорию к данному уроку.

Примеры решения задач

Задача . Поиск и замена

Задача. Дана строка ‘aaa@bbb@ccc’. Замените все @ на ‘!’ с помощью глобального поиска и замены.

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

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

Задача . Методы substr, substring, slice

Задача. Дана строка ‘aaa bbb ccc’. Вырежите из нее слово ‘bbb’ тремя разными способами (через substr, substring, slice).

Решение: слово ‘bbb’ начинается с символа номер 4 (нумерация с нуля), а заканчивается символом номер 6. Воспользуемся указанными методами:

Обратите внимание на то, что в методах substring и slice второй параметр должен быть на 1 больше того символа, который мы хотим забрать (то есть, если указать число 7 — то отрезание произойдет до 6 символа включительно).

Задача . Преобразование формата даты

Задача. В переменной date лежит дата в формате ‘2025-12-31’. Преобразуйте эту дату в формат ’31/12/2025′.

Решение: с помощью метода split разобьем нашу строку ‘2025-12-31’ в массив по разделителю ‘-‘, при этом в нулевом элементе окажется год, в первом — месяц, во втором — день:

Теперь, обращаясь к разным элементам массива по их ключам, сформируем нужную нам строку:

Задачи для решения

Работа с регистром символов

Дана строка ‘js’. Сделайте из нее строку ‘JS’.

Дана строка ‘JS’. Сделайте из нее строку ‘js’.

Работа с length, substr, substring, slice. Работа с indexOf

Дана строка ‘я учу javascript!’. Найдите количество символов в этой строке.

Дана строка ‘я учу javascript!’. Вырежите из нее слово ‘учу’ и слово ‘javascript’ тремя разными способами (через substr, substring, slice).

Дана строка ‘я учу javascript!’. Найдите позицию подстроки ‘учу’.

Дана переменная str, в которой хранится какой-либо текст. Реализуйте обрезание длинного текста по следующему принципу: если количество символов этого текста больше заданного в переменной n, то в переменную result запишем первые n символов строки str и добавим в конец троеточие ‘. ‘. В противном случае в переменную result запишем содержимое переменной str.

Работа с replace

Дана строка ‘Я-учу-javascript!’. Замените все дефисы на ‘!’ с помощью глобального поиска и замены.

Работа с split

Дана строка ‘я учу javascript!’. С помощью метода split запишите каждое слово этой строки в отдельный элемент массива.

Дана строка ‘я учу javascript!’. С помощью метода split запишите каждый символ этой строки в отдельный элемент массива.

В переменной date лежит дата в формате ‘2025-12-31’. Преобразуйте эту дату в формат ‘31.12.2025’.

Работа с join

Дан массив [‘я’, ‘учу’, ‘javascript’, ‘!’]. С помощью метода join преобразуйте массив в строку ‘я+учу+javascript+!’.

Задачи

Преобразуйте первую букву строки в верхний регистр.

Преобразуйте первую букву каждого слова строки в верхний регистр.

Преобразуйте строку ‘var_test_text’ в ‘varTestText’. Скрипт, конечно же, должен работать с любыми аналогичными строками.

Что нужно знать про массивы в JavaScript

Когда дело доходит до прохода по массиву, поиску элементов и так далее, вероятнее всего, для этого есть соответствующий метод массива. Однако часть методов остаётся в тени, поэтому в этой статье поговорим о полезных методах массивов в JavaScript.

Пример использования метода reduce для «сглаживания» массива

Основа основ

Есть 4 вещи, которые вы должны знать при работе с массивами — это map , filter , reduce и spread-оператор. Они являются мощным базисом.

Вероятнее всего, вы часто сталкивались с этим методом. Его используют, когда нужно поэлементно трансформировать массив в новый.


Метод map() принимает всего один параметр — функцию, которая вызывается при каждой итерации по массиву. Метод возвращает новый массив, а не изменяет существующий.

Подобным образом можно получить массив, содержащий в себе только одно свойство объекта:

Поэтому, если нужно поэлементно трансформировать массив в новый — используйте map() .

filter

В принципе имя метода говорит само за себя: он используется тогда, когда нужно произвести фильтрацию массива.

Как и map() , метод filter() принимает только один параметр — функцию, которая вызывается при каждой итерации. Функция должна возвращать булево значение:

  • true — элемент остаётся в новом массиве,
  • false — элемент не остаётся в новом массиве.

После этого вы получаете отфильтрованный массив с нужными вам элементами.

Helastel, удалённо, от 150 000 ₽

К примеру, сохраним только нечётные числа в массиве:

Или же можно удалять строго определённые элементы массива:

reduce

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

Метод reduce() предназначен для комбинации значений массива в одно значение. Метод принимает два параметра. Первый из них — callback-функция ( reducer ), второй — первичное значение, которое является необязательным и по-умолчанию является первым элементом массива. Callback-функция принимает 4 аргумента:

  • accumulator (он хранит в себе промежуточный результат итераций),
  • текущее значение массива,
  • текущий index ,
  • сам массив.

В большинстве случаев вам достаточно будет первых двух аргументов: промежуточного результата и текущего значения.

Поначалу это может звучать сложно, но на примерах всё разъяснится. Вот самый простой из них:

При первой итерации переменная total (промежуточный результат) принимает значение 37. Возвращаемое значение равно (37 + n) , где n равняется 12, т. е. значение равно 49. При второй итерации промежуточный результат равен 49 и к нему прибавляется 28. Теперь total равен 77. И так далее.

Метод reduce() настолько хорош, что с его помощью можно создавать остальные методы массива, например map() или filter() :

В случае map() запускается функция, результат которой добавляется в конец accumulator’а с помощью spread-оператора. В filter() почти то же самое, за исключением того, что на каждом элементе запускается filter-функция. Если эта функция возвращает true , то возвращается предыдущий массив (промежуточное значение), иначе элемент добавляется в конец массива.

Вот более сложный пример: функция, которая «сглаживает» массив рода [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] в одномерный массив [1, 2, 3, 4, 5, 6, 7, 8] .

Принцип работы схож с map() , только с щепоткой рекурсии.

Spread оператор (стандарт ES2015)

Несмотря на то что оператор не является методом, с его помощью можно добиться многого при работе с массивами. Например, можно делать копии массивов или же объединять несколько массивов в один.

Обратите внимание, что этот оператор создаёт поверхностную копию исходного массива. Но что значит?

При поверхностном копировании элементы массива дублируются минимальным образом. Если, скажем, массив состоит только из примитивов (числа, строки, булевы значения), то это не вызовет никаких проблем. Но нельзя сказать то же самое о массиве объектов. При поверхностном копировании объектов в массиве созданные (продублированные) элементы ссылаются на оригиналы. Следовательно, если вы попытаетесь изменить объект в массиве, то изменения будут отражаться и на всех продублированных с него объектах (так же и в обратную сторону).

Поэтому если вам нужно сделать полную копию массива, содержащего объекты, то можно воспользоваться функцией cloneDeep из библиотеки lodash.

Углубляемся

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

includes (стандарт ES2020)

Часто ли вы использовали indexOf() , чтобы узнать о наличии чего-либо в массиве? Ужасный способ, не правда ли? К счастью, существует метод includes() . Он принимает всего один параметр — искомый элемент — и возвращает true / false в зависимости от результата поиска.

concat

Этот метод объединяет два или более массивов.

forEach

Этот метод нужен, когда вам необходимо выполнить что-либо для каждого элемента массива. Метод принимает функцию в качестве параметра. Сама функция принимает 3 параметра: текущее значение, индекс и сам массив:

indexOf

Этот метод возвращает индекс первого вхождения элемента в массиве. indexOf() так же часто используется в качестве проверки на наличие определённого элемента в массиве, хотя делать так не рекомендуется (ведь существует includes() ).

Метод find() идентичен методу filter() . Ему тоже нужно передавать функцию, которая проверяет каждый элемент массива. Но в отличие от filter() , метод find() прекращает поиск, когда находит первый элемент, удовлетворяющий условию проверяющей функции.

Используйте filter() , чтобы пройтись по всему массиву, а find() — чтобы найти уникальный элемент в нём.

findIndex

Метод полностью идентичен предыдущему методу find() , за исключением того, что findIndex() возвращает индекс конкретного искомого элемента.

Возможно вы скажете: «Эй! Этот метод же делает тоже самое, что и indexOf() !».

Передаваемый параметр в indexOf() — это просто примитив (число, строка, булево значение, null, undefined или просто символ), в то время как параметр в findIndex() — это callback-функция.

Поэтому если нужно найти индекс элемента в массиве примитивов, используйте indexOf() . В других же случаях (массивы объектов) берите findIndex() .

slice

Метод используется в тех случаях, когда необходимо извлечь подмассив из массива. Однако с ним нужно быть осторожным. Как и spread-оператор, этот метод возвращает поверхностную копию подмассива.

Как говорилось в начале статьи, во многих случаях циклы можно заменить.

Допустим, через API вы получили какое-то количество сообщений, но хотите отобразить только 5 из них. Ниже приведены 2 способа: первый — с использованием цикла, второй — с использованием slice .

Используйте этот метод чтобы узнать, удовлетворяет ли условию хотя бы один из элементов массива. Как и map() , fitler() и find() , метод some принимает callback-функцию как единственный параметр. Он возвращает true при наличии в массиве хотя бы одного нужного элемента и false — при отсутствии. Метод хорошо подходит для работы с разрешениями:

every

Идентичен предыдущему методу, но возвращает true в случае, если все элементы проходят проверку (а не минимум один).

flat (стандарт ES2020)

Этот метод — новинка в мире JavaScript. flat() создаёт новый массив из всех подмассивов в нём. Он принимает один параметр — глубину «сглаживания» массива:

flatMap (стандарт ES2020)

Исходя из названия, несложно догадаться, что делает этот метод.

Сначала он вызывает mapping-функцию для каждого элемента в массиве, а потом «выравнивает» их в один массив. И всё!

В примере выше нужно получить все слова из нескольких предложений. Вместо того, чтобы сначала использовать map() для разделения предложения на слова, а потом соединять их в массив, проще сразу использовать flatMap() .

А ещё помощью reduce() можно подсчитать количество слов:

flatMap() часто используется в Реактивном Программировании, например как вот здесь.

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

Так, например, можно отобразить список всех участников:

А вот более практичный способ. Допустим, сначала нужно отфильтровать список участников перед соединением их имён в строку:

Это статический метод, позволяющий создать новый массив из массиво-подобных и итерабельных объектов (строка). Метод полезен при работе с DOM.

Вы заметили, что в примере выше вместо объекта массива используется Array ? Именно поэтому метод from() называется статическим.

С помощью forEach() можно легко повесить на каждый элемент массива обработчик событий:

Модифицирующие методы

Ниже будет описана остальная часть методов массивов. Их отличия в том, что они модифицируют существующий массив, а не создают новый. В этом нет ничего плохого, просто нужно помнить про это.

В случае, если вам всё же нужно сохранить оригинальный массив, можно использовать поверхностное или глубокое копирование массива:

Да, sort() модифицирует оригинальный массив. По умолчанию, метод преобразует все элементы в строки и выполняет их сортировку в алфавитном порядке:

Поэтому будьте осторожны, придя, к примеру, с Python! При попытке выполнить sort для массива чисел можно получить совсем не тот результат, какой хотелось бы:

Как же в таком случае отсортировать массив? Метод sort() принимает всего один параметр — функцию сравнения. Эта функция принимает два параметра: первый элемент (например a ) и второй элемент ( b ). Функция сравнения этих двух элементов должна возвращать число:

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

И теперь массив чисел можно сортировать так:

Таким же образом можно сортировать даты (самые ранние):

Метод fill() изменяет или полностью заполняет массив с начальной по конечную позиции. Отличное применение — это заполнение нового массива одним статическим значением.

reverse

Здесь всё предельно ясно:

Этот метод удаляет последний элемент массива и возвращает его.

Методы, которые можно заменить

В конце этой статьи будет рассказано о методах, которые образованы из вышеописанных методов и могут быть легко заменены чем-нибудь другим. Необязательно отказываться от этих методов, просто помните, что есть альтернатива.

При работе с массивами этот метод используется довольно часто. Фактически он добавляет один элемент в конец массива. Метод push() также иногда используется для создания нового массива на основе уже существующего.

Если вам нужно создать новый массив на основе уже существующего (как в itemsIncremented ), то можно воспользоваться известными методами map() , filter() , reduce() . Например, с помощью map() создание нового массива выглядело бы так:

const itemsIncremented = todoItems . map( x => x + 1)

А если нужно будет добавить новый элемент в конец массива, кроме push() можно использовать spread-оператор:

splice

Метод используется в тех случаях, когда нужно удалить элемент где-то в середине массива. Хотя тоже самое можно сделать и с помощью filter() :

Всё бы хорошо, но как в таком случае удалить несколько элементов? Используя slice() , конечно:

shift

Этот метод удаляет первый элемент массива и возвращает его. Подобного можно добиться с помощью spread или rest операторов:

unshift

С помощью этого метода можно добавлять элементы в начало массива. Как и в предыдущем случае, unshift() можно заменить spread-оператором:

Три способа найти самое длинное слово в строке JavaScript

С помощью разрабатываемого алгоритма мы узнаем в JavaScript длину строки и каждого слова. Затем мы сравним подсчеты, и определим, в каком слове содержится больше всего символов:

Это можно реализовать несколькими способами. Прежде всего, при помощи цикла FOR , методов sort() и reduce() .

Алгоритмическая задача

Вернуть длину самого длинного слова в предложении. Ответ должен быть выражен в числах:

Предложенные тест-кейсы

  • findLongestWord(“The quick brown fox jumped over the lazy dog”) должна вернуть число;
  • findLongestWord(“The quick brown fox jumped over the lazy dog”) должна вернуть число 6;
  • findLongestWord(“May the force be with you”) должна вернуть число 5;
  • findLongestWord(“Google do a barrel roll”) должна вернуть число 6;
  • findLongestWord(“What is the average airspeed velocity of an unladen swallow”) должна вернуть число 8;
  • findLongestWord(“What if we try a super-long word such as otorhinolaryngology”) должна вернуть число 19.

1. Находим самое длинное слово при помощи цикла FOR

Чтобы узнать длину строки JavaScript , мы воспользуемся методом String.prototype.split() .

Метод split() разбивает объект String на массив строк, разделяя строки на подстроки.

Между скобками в методе split() нужно будет добавить пробел,


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

если не добавить пробел в скобках, то получится следующий результат:

Без комментариев использование JavaScript длина строки length выглядит так:

2. Находим самое длинное слово с помощью метода sort()

Мы воспользуемся методом Array.prototype.sort() , который позволяет сортировать массив по определенному критерию, а затем возвращает длину первого элемента в данном массиве.

Метод sort() сортирует элементы массива и возвращает массив.

Если мы просто отсортируем массив:

то получим следующий результат:

Перед тем, как узнать длину строки в JavaScript, мы сортируем элементы по определенному критерию,

в котором длина второго элемента сравнивается с длиной первого:

Код, с помощью которого мы узнаем длину строки JavaScript , без комментариев выглядит так:

3. Находим самое длинное слово с помощью метода reduce()

reduce() применяет функцию к каждому значению в массиве ( слева направо ), чтобы сократить его до единственного значения. Метод исполняет callback-функцию лишь один раз для каждого элемента в массиве.

Вы можете представить исходное значение в качестве второго аргумента для метода reduce . Здесь мы добавляем пустую строку “” .

Данная публикация представляет собой перевод статьи « Three Ways to Find the Longest Word in a String in JavaScript » , подготовленной дружной командой проекта Интернет-технологии.ру

Строка в JavaScript. Работа со строками в JavaScript

Дата публикации: 2020-11-04

От автора: приветствую вас, друзья. В нескольких предыдущих статьях мы с вами знакомились с числовыми типом данных в JavaScript и работали с числами. Теперь пришло время работы со строками в JavaScript. Давайте ближе познакомимся со строковым типом данных в JavaScript.

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

Как вы помните, любой текст в JavaScript является строкой. Строка обязательно должна быть заключена в кавычки, одинарные или двойные, без разницы:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Сейчас мы записали в переменные всего по одному слову. А что если мы хотим записать большой объем текста? Да без проблем, давайте запишем в переменную какой-нибудь рыбный текст и выведем его в консоль:

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

Как видим, мой текстовый редактор уже подсветил красным цветом возможную проблему. Давайте посмотрим, как на перевод строки в такой интерпретации среагирует браузер:

Синтаксическая ошибка, как и следовало ожидать. Как же быть? Записать в переменную многострочный текст можно несколькими способами. Об одном из них вы даже уже могли догадаться, речь идет о конкатенации строк:

Как видим, редактор уже нормально реагирует на такой вариант записи строки в переменную. Другой вариант — использование обратного слеша (\), который в JavaScript и во многих других языках программирования является экранирующим символом, позволяющим безбоязненно работать со спецсимволами. Что такое спецсимволы мы узнаем далее. Итак, попробуем экранировать невидимый символ перевода строки:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Экранирование также решило нашу проблему. Однако, если мы заглянем в консоль, то и конкатенация строк, и экранирования перевода строки, решив проблему записи в программу, не решило проблему с выводом многострочной строки на экран. Вместо многострочной строки мы увидим в консоли текст в одну строку. Как быть?

И здесь нам поможет специальный символ новой строки — \n. Добавив этот спецсимвол в строку в нужном месте, мы скажем интерпретатору, что в этом месте необходимо завершить текущую строку и сделать переход на новую строку.

JavaScript Строковые методы

Строковые методы помогают работать со строками.

Строковые методы и свойства

Примитивные значения, такие как «John Doe», не могут иметь свойств или методов (поскольку они не являются объектами).

Но с помощью JavaScript методы и свойства также доступны для примитивных значений, поскольку JavaScript обрабатывает примитивные значения как объекты при выполнении методов и свойств.

Длина строки

Свойство length возвращает длину строки:

Пример

Поиск строки в строке

Метод IndexOf () возвращает индекс (положение) первого вхождения заданного текста в строку:

Пример

JavaScript подсчитывает позиции с нуля.
0 — первая позиция в строке, 1 — вторая, 2 — третья.

Метод LastIndexOf () возвращает индекс последнего вхождения заданного текста в строке:

Пример

Оба IndexOf () и LastIndexOf () return-1, если текст не найден.

Пример

Оба метода принимают второй параметр в качестве начальной позиции для поиска:

Пример

Поиск строки в строке

Метод Search () ищет строку для заданного значения и возвращает позицию совпадения:

Пример

Вы заметили?

Два метода, IndexOf () и Search (), равны?

Они принимают одни и те же аргументы (параметры) и возвращают одно и то же значение?

Два метода не равны. Вот различия:

  • Метод Search () не может принимать второй аргумент начального положения.
  • Метод IndexOf () не может принимать мощные значения поиска (регулярные выражения).

Вы узнаете больше о регулярных выражениях в более поздней главе.

Извлечение строковых деталей

Существует 3 способа извлечения части строки:

  • срез (начало, конец)
  • подстрока (начало, конец)
  • substr (начало, длина)

Метод slice ()

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

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

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

Пример

The result of res will be:

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

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

Пример

The result of res will be:

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

Пример

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

Пример

Отрицательные позиции не работают в Internet Explorer 8 и более ранних версиях.

Метод подстроки ()

подстрока () аналогична срезу ().

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

Пример

The result of res will be:

Если опустить второй параметр, подстрока () будет разрезать оставшуюся часть строки.

Метод substr ()

substr () похож на slice ().

Разница в том, что второй параметр указывает длину извлеченной детали.

Пример

The result of res will be:

Если опустить второй параметр, substr () будет разрезать оставшуюся часть строки.

Пример

The result of res will be:

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

Пример

The result of res will be:

Замена содержимого строки

Метод Replace () заменяет указанное значение другим значением в строке:

Пример

Метод Replace () не изменяет строку, в которой он вызывается. Возвращает новую строку.

По умолчанию функция Replace () заменяет только первое совпадение:

Пример

По умолчанию функция Replace () учитывает регистр. Написание Microsoft (с верхним регистром) не будет работать:

Пример

Чтобы заменить регистр без учета регистра, используйте регулярное выражение с пометкой » i » (нечувствительно):

Пример

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

Чтобы заменить все совпадения, используйте регулярное выражение с флагом /g (глобальное совпадение):

Пример

Вы узнаете намного больше о регулярных выражениях в главе регулярные выражения JavaScript.

Преобразование в верхний и нижний регистр

Строка преобразуется в верхний регистр с toUpperCase ():

Пример

Строка преобразуется в нижний регистр с toLowerCase ():


Пример

Метод Concat ()

concat () соединяет две или более строк:

Пример

Вместо оператора Plus можно использовать метод concat () . Эти две строки делают то же самое:

Пример

Все строковые методы возвращают новую строку. Они не изменяют исходную строку.
Формально сказал: строки являются неизменяемыми: строки не могут быть изменены, только заменены.

String.trim()

String.trim() Удаляет пробелы с обеих сторон строки.

Пример

Строка. Trim () не поддерживается в Internet Explorer 8 или ниже.

Если вам нужно поддерживать IE 8, вы можете использовать String. Replace с регулярным выражением вместо:

Пример

Метод charCodeAt ()

Метод charCodeAt () возвращает Юникод символа по указанному индексу в строке:

Пример

var str = «HELLO WORLD»;

str.charCodeAt(0); // returns 72

Доступ к строке в виде массива небезопасен

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

var str = «HELLO WORLD»;

str[0]; // returns H

Это небезопасно и непредсказуемо:

  • Она не работает во всех браузерах (не в IE5, IE6, IE7)
  • Это делает строки выглядят как массивы (но они не являются)
  • str [0] = «H» не дает ошибки (но не работает)

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

Преобразование строки в массив

Строка может быть преобразована в массив с помощью метода Split () :

Пример

Если разделитель опущен, возвращаемый массив будет содержать всю строку в index [0].

Если разделитель «», возвращаемый массив будет массивом из одного символа:

Пример

Полная ссылка на строку

Для полной справки перейдите к нашей полной ссылке на строку JavaScript.

Ссылка содержит описания и примеры всех строковых свойств и методов.

Как из строки получить массив символов

Нужно получить из этой строки массив символов:

Как это сделать?

4 ответа 4

Метод split() разбивает строку по указанному селектору

Можно через RegExp:

Еще один способ с помощью оператора spread

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.9.35389

Полезные строковые методы

Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдем дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.

Необходимые навыки: Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель: Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов, для управления строками.

Строки как объекты

Как мы говорили ранее — всё является объектами в JavaScript. Когда вы создаете строку, например:

ваша переменная становится строковым объектом и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом перейдя на страницу String и просмотрев на ней список свойств и методов!

Только не волнуйтесь! Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них, вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.

Приведем несколько примеров в новой консоли. Ниже вы можете открыть данную консоль в отдельной вкладке или окне, или, если вам так удобней, использовать браузер консоли разработчика.

Hidden code

Поиск длины строки

Это легко — вы просто используете свойство length . Попробуйте ввести следующие строки:

Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имен, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввел в поле формы, слишком длинное, если оно превышает определенную длину.

Получение определенного строкового символа

Вы можете вернуть любой символ внутри строки, используя обозначение в квадратных скобках. Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:

Компьютеры считают от 0, а не 1! Чтобы получить последний символ любой строки, мы могли бы использовать следующую строку, объединив эту технику с свойством length :

Длина слова «mozilla» равна 7, но, поскольку счет начинается с 0, позиция последнего символа равна 6, поэтому нам нужна length-1 . Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.

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

  1. Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода indexOf () , который принимает одну parameter — подстроку, которую вы хотите найти. Введите: Это дает нам результат 2, потому что подстрока «zilla» начинается в позиции 2 («m» — 0, «o» — 1, «z» — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
  1. Это можно сделать по-другому, что, возможно, еще более эффективно. Введите следующее: Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.

    Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla», или, если вы используете оператор отрицания, как показано ниже. Вы могли бы сделать что-то вроде этого:

  2. Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите ее завершить, можно использовать slice () для извлечения. Попробуйте следующее: Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку. Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая ее (помним, что счет идет с 0, а не с 1). Также можно сказать, что второй параметр равен длине возвращаемой строки.
  3. Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определенного символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.

Заметка: второй параметр slice() опционален: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу slice () , чтобы узнать, что еще вы можете узнать.

Изменение регистра

Строковые методы toLowerCase () и toUpperCase () преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введенные пользователем данные перед их сохранением в базе данных.

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

Обновление частей строки

Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод replace () . Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.

Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:

Обратите внимание, что для фактического получения обновленного значения, отраженного в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: browserType = browserType.replace(‘moz’,’van’);

Активные примеры обучения

В этом разделе мы дадим вам попробовать набить руку и вместе напишем код строковой манипуляции. В каждом упражнении ниже у нас есть массив строк и цикл, который обрабатывает каждое значение в массиве и отображает его в маркированном списке. Вам не нужно понимать массивы или циклы прямо сейчас — это будет объяснено в будущих статьях. Все, что вам нужно сделать в каждом случае, — написать код, который выводит строки в том формате, в котором мы предлагаем.

В каждом примере есть кнопка «Reset», которую вы можете использовать для сброса кода, если вы допустили ошибку, и не можете заставить его работать снова, а кнопку «Show solution» вы можете нажать, чтобы увидеть потенциальный ответ, если вы действительно застрянете на решении.

Фильтрация приветственных сообщений

В первом упражнении мы начнем с простого — у нас есть множество сообщений поздравительных открыток, но мы хотим отсортировать их, чтобы перечислять только рождественские сообщения. Мы хотим, чтобы вы заполнили условный тест внутри структуры if( . ), чтобы проверить каждую строку и отобразить ее в списке, только если это рождественское сообщение.

  1. Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
  2. Затем вам нужно будет написать условный тест operand1 operator operand2. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
  3. Подсказка. В этом случае, вероятно, более полезно проверить, не является ли часть строки не равной (!==) определенному результату.
Playable code

Исправление регистра (размера букв в тексте-прим. пер.)

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

  1. Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните ее в новой переменной.
  2. Возьмите первую букву строки в этой новой переменной и сохраните ее в другой переменной.
  3. Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, измененной на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
  4. Измените значение переменной result на равную конечному результату (не input ).

Заметка: Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.

Playable code 2

Создание новых строк из старых частей

В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трехбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:

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

Мы бы рекоменовали реализовать это следующим образом:

  1. Извлеките трехбуквенный код станции и сохраните его в новой переменной.
  2. Найдите номер символьного номера точки с запятой.
  3. Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
  4. Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
  5. Измените значение переменной result равной конечной строке, (не input ).
Playable code 3

Заключение

Нельзя не согласиться, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все об общении с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдет вам на пользу, когда вы займетесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.

In this module

Metadata

  • Последнее изменение: May 20, 2020 , by MDN contributors
  1. Новички начинают здесь!
  2. Начало работы с Вебом
    1. Начало работы с Вебом
    2. Установка базового программного обеспечения
    3. Каким должен быть ваш веб-сайт?
    4. Работа с файлами
    5. Основы HTML
    6. Основы CSS
    7. Основы JavaScript
    8. Публикация вашего веб-сайта
    9. Как работает Веб

  3. HTML — структура Веба
  4. Вступление в HTML
    1. Вступление в HTML
    2. Начало работы с HTML
    3. Что в «шапке»? Метаданные в HTML
    4. Тексты в HTML
    5. Создание гиперссылок
    6. Продвинутое форматирование текста
    7. Структура документа и веб-сайта
    8. Отладка HTML
    9. Задание: Выделение символа
    10. Задание: Структура страницы
  5. Мультимедиа и встраивание
    1. Мультимедиа и встраивание
    2. Изображения в HTML
    3. Видео и аудио контент
    4. От object до iframe — другие технологии встраивания
    5. Добавление векторный графики в Веб
    6. Отзывчивые изображения
    7. Задание: Страница о Mozilla
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. HTML forms
    1. HTML forms overview
    2. Your first HTML form
    3. How to structure an HTML form
    4. The native form widgets
    5. Sending form data
    6. Form validation
    7. How to build custom form widgets
    8. Sending forms through JavaScript
    9. HTML forms in legacy browsers
    10. Styling HTML forms
    11. Advanced styling for HTML forms
    12. Property compatibility table for form widgets
  8. CSS — стилизирование Веба
  9. Вступление в CSS
    1. Вступление в CSS
    2. Как работает CSS
    3. Синтаксис CSS
    4. Введение в селекторы
    5. Простые селекторы
    6. Селекторы по атрибутам
    7. Псевдоклассы и псевдоэлементы
    8. Комбинаторы и множественные селекторы
    9. CSS значения и единицы
    10. Каскадность и наследование
    11. Блочная модель
    12. Отладка CSS
    13. Задание: Основы понимания CSS
  10. Стилизирование текста
    1. Стилизирование текста
    2. Основы стилизирования текста и шрифта
    3. Стилизирование списков
    4. Стилизирование ссылок
    5. Веб-шрифты
    6. Задание: Стилизирование школьного сайта
  11. Стилизирование блоков
    1. Стилизирование блоков
    2. Кратко о блочной модели
    3. Фоны
    4. Рамки
    5. Стилизирование таблиц
    6. Продвинутые эффекты
    7. Задание: Создание разукращенного листа
    8. Задание: Классно выглядищий блок
  12. CSS макет
    1. CSS макет
    2. Вступление
    3. Normal Flow
    4. Flexbox
    5. Сетки
    6. Float
    7. Позиционирование
    8. Multiple-column Layout
    9. Legacy Layout Methods
    10. Supporting Older Browsers
    11. Fundamental Layout Comprehension
  13. JavaScript — динамический клиентский скриптинг
  14. Первые шаги в JavaScript
    1. Первые шаги в JavaScript
    2. Что такое JavaScript?
    3. Первое погружение в JavaScript
    4. Что-то пошло не так? Устранение ошибок JavaScript
    5. Хранение нужной информации — Переменные
    6. Основы JavaScript — Числа и операторы
    7. Работа с текстом — Строки в JavaScript
    8. Полезные методы для строк
    9. Массивы
    10. Задание: Генератор глупых историй
  15. Блоки в JavaScript
    1. Блоки в JavaScript
    2. Делаем решения в вашем годе — Условия
    3. Повторение кода
    4. Функции — Переиспользуемые блоки кода
    5. Создаём свою функцию
    6. Возвращаемые значения функций
    7. Введение в события
    8. Задание: Галерея изображений
  16. Введение в объекты JavaScript
    1. Введение в объекты JavaScript
    2. Основы объектов
    3. Объектно-ориентированный JavaScript для новичков
    4. Прототипы объектов
    5. Наследование в JavaScript
    6. Работа с JSON данными
    7. Практика по созданию объектов
    8. Задание: Добавление возможностей в пример с прыгающими шарами
  17. Asynchronous JavaScript
    1. Asynchronous JavaScript overview
    2. General asynchronous programming concepts
    3. Introducing asynchronous JavaScript
    4. Cooperative asynchronous Java​Script: Timeouts and intervals
    5. Graceful asynchronous programming with Promises
    6. Making asynchronous programming easier with async and await
    7. Choosing the right approach
  18. Client-side web APIs
    1. Client-side web APIs
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third party APIs
    6. Drawing graphics
    7. Video and audio APIs
    8. Client-side storage
  19. Accessibility — Make the web usable by everyone
  20. Accessibility guides
    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
  21. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  22. Инструменты и тестирование
  23. Кроссбраузерное тестирование
    1. Кроссбраузерное тестирование
    2. Вступление в кроссбраузерное тестирование
    3. Стратегии выполнения тестирования
    4. Решение частых проблем с HTML и CSS
    5. Решение частых проблем с JavaScript
    6. Решение частых проблем доступности
    7. Проверка поддержки возможностей
    8. Вступление в автоматическое тестирование
    9. Установка вашей автоматической среды тестирования
  24. Программирование серверной части сайта
  25. Первые шаги
    1. Первые шаги
    2. Вступление в серверное программирование
    3. Клиент-сервер
    4. Веб-фреймворки для серверной части
    5. Защищённость веб-сайтов
  26. Веб-фреймворк Django (Python)
    1. Веб-фреймворк Django (Python)
    2. Вступление
    3. Установка среды разработки
    4. Руководство: Сайт местной библиотеки
    5. Руководство часть 2: Создаём набросок сайта
    6. Руководство часть 3: Использование моделей
    7. Руководство часть 4: Django панель администратора
    8. Руководство часть 5: Создание нашей домашней страницы
    9. Руководство часть 6: Списки и представления
    10. Руководство часть 7: Сессии
    11. Руководство часть 8: Аутенфикация и разрешения пользователей
    12. Руководство часть 9: Работа с формами
    13. Руководство часть 10: Тестирование веб-приложения на Django
    14. Руководство часть 11: Разворачивание Django на продакшн сервере
    15. Защищённость веб-приложения
    16. Задание: создание мини блога
  27. Express Web Framework (node.js/JavaScript)
    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
  28. Дальнейшее чтение
  29. Общие вопросы
    1. Вопросы по HTML
    2. Вопросы по CSS
    3. JavaScript questions
    4. Как работает Веб
    5. Инструменты и установка
    6. Дизайн и доступность
  30. Как помочь?

Mozilla

© 2005- 2020 Mozilla and individual contributors.

Content is available under these licenses.

\u041F\u043E\u0438\u0441\u043A \u0434\u043B\u0438\u043D\u044B \u0441\u0442\u0440\u043E\u043A\u0438

\u042D\u0442\u043E \u043B\u0435\u0433\u043A\u043E — \u0432\u044B \u043F\u0440\u043E\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E length . \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0441\u0442\u0440\u043E\u043A\u0438:

\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u043C \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0447\u0438\u0441\u043B\u043E 7, \u043F\u043E\u0442\u043E\u043C\u0443 \u0447\u0442\u043E \u0441\u043B\u043E\u0432\u043E \u00ABmozilla\u00BB \u0441\u043E\u0441\u0442\u043E\u0438\u0442 \u0438\u0437 7 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432. \u042D\u0442\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E \u043C\u043E\u0436\u043D\u043E \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C,\u00A0\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0435\u0441\u043B\u0438 \u0432\u044B \u0437\u0430\u0445\u043E\u0442\u0438\u0442\u0435 \u043D\u0430\u0439\u0442\u0438 \u0434\u043B\u0438\u043D\u044B \u0441\u0435\u0440\u0438\u0438 \u0438\u043C\u0435\u043D, \u0447\u0442\u043E\u0431\u044B \u0438\u0445 \u043C\u043E\u0436\u043D\u043E \u0431\u044B\u043B\u043E \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0442\u044C\u00A0\u043F\u043E \u043F\u043E\u0440\u044F\u0434\u043A\u0443 \u0434\u043B\u0438\u043D\u044B \u0438\u043B\u0438 \u0441\u043E\u043E\u0431\u0449\u0438\u0442\u044C \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044E, \u0447\u0442\u043E \u0438\u043C\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0435 \u043E\u043D \u0432\u0432\u0435\u043B\u00A0\u0432 \u043F\u043E\u043B\u0435 \u0444\u043E\u0440\u043C\u044B, \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0434\u043B\u0438\u043D\u043D\u043E\u0435, \u0435\u0441\u043B\u0438 \u043E\u043D\u043E \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u0443\u044E \u0434\u043B\u0438\u043D\u0443.

\u041F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u0441\u0442\u0440\u043E\u043A\u043E\u0432\u043E\u0433\u043E \u0441\u0438\u043C\u0432\u043E\u043B\u0430

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043B\u044E\u0431\u043E\u0439 \u0441\u0438\u043C\u0432\u043E\u043B \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u043E\u0431\u043E\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0432 \u043A\u0432\u0430\u0434\u0440\u0430\u0442\u043D\u044B\u0445 \u0441\u043A\u043E\u0431\u043A\u0430\u0445.\u00A0\u042D\u0442\u043E \u043E\u0437\u043D\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043E \u0432\u044B \u0434\u043E\u0431\u0430\u0432\u043B\u044F\u0435\u0442\u0435 \u043A\u0432\u0430\u0434\u0440\u0430\u0442\u043D\u044B\u0435 \u0441\u043A\u043E\u0431\u043A\u0438 ([ ]) \u0432 \u043A\u043E\u043D\u0446\u0435 \u0432\u0430\u0448\u0435\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439. \u0412 \u043A\u0432\u0430\u0434\u0440\u0430\u0442\u043D\u044B\u0445 \u0441\u043A\u043E\u0431\u043A\u0430\u0445 \u0432\u044B \u0443\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442\u0435 \u043D\u043E\u043C\u0435\u0440 \u0441\u0438\u043C\u0432\u043E\u043B\u0430, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0445\u043E\u0442\u0438\u0442\u0435 \u0432\u0435\u0440\u043D\u0443\u0442\u044C.\u00A0\u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043F\u0435\u0440\u0432\u0443\u044E \u0431\u0443\u043A\u0432\u0443, \u043D\u0443\u0436\u043D\u043E \u043D\u0430\u043F\u0438\u0441\u0430\u0442\u044C:

\u041A\u043E\u043C\u043F\u044C\u044E\u0442\u0435\u0440\u044B \u0441\u0447\u0438\u0442\u0430\u044E\u0442 \u043E\u0442 0, \u0430 \u043D\u0435 1! \u0427\u0442\u043E\u0431\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0441\u0438\u043C\u0432\u043E\u043B \u043B\u044E\u0431\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438, \u043C\u044B \u043C\u043E\u0433\u043B\u0438 \u0431\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0443\u044E \u0441\u0442\u0440\u043E\u043A\u0443, \u043E\u0431\u044A\u0435\u0434\u0438\u043D\u0438\u0432 \u044D\u0442\u0443 \u0442\u0435\u0445\u043D\u0438\u043A\u0443 \u0441 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E\u043C length :

\u0414\u043B\u0438\u043D\u0430 \u0441\u043B\u043E\u0432\u0430 \u00ABmozilla\u00BB \u0440\u0430\u0432\u043D\u0430 7, \u043D\u043E, \u043F\u043E\u0441\u043A\u043E\u043B\u044C\u043A\u0443 \u0441\u0447\u0435\u0442 \u043D\u0430\u0447\u0438\u043D\u0430\u0435\u0442\u0441\u044F \u0441 0, \u043F\u043E\u0437\u0438\u0446\u0438\u044F \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0433\u043E \u0441\u0438\u043C\u0432\u043E\u043B\u0430 \u0440\u0430\u0432\u043D\u0430 6, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u043D\u0430\u043C \u043D\u0443\u0436\u043D\u0430 length-1 . \u0422\u0430\u043A\u043E\u0439 \u0441\u043F\u043E\u0441\u043E\u0431 \u043C\u043E\u0436\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C, \u0447\u0442\u043E\u0431\u044B \u043D\u0430\u0439\u0442\u0438 \u043F\u0435\u0440\u0432\u0443\u044E \u0431\u0443\u043A\u0432\u0443 \u0440\u044F\u0434\u0430 \u0441\u0442\u0440\u043E\u043A \u0438 \u0443\u043F\u043E\u0440\u044F\u0434\u043E\u0447\u0438\u0442\u044C \u0438\u0445 \u043F\u043E \u0430\u043B\u0444\u0430\u0432\u0438\u0442\u0443.

\u041F\u043E\u0438\u0441\u043A \u043F\u043E\u0434\u0441\u0442\u0440\u043E\u043A\u0438 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0438 \u0435\u0435 \u0438\u0437\u0432\u043B\u0435\u0447\u0435\u043D\u0438\u0435

\u0417\u0430\u043C\u0435\u0442\u043A\u0430: \u0432\u0442\u043E\u0440\u043E\u0439 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 slice() \u043E\u043F\u0446\u0438\u043E\u043D\u0430\u043B\u0435\u043D: \u0435\u0441\u043B\u0438 \u0432\u044B \u0435\u0433\u043E \u043D\u0435 \u0432\u043A\u043B\u044E\u0447\u0438\u0442\u0435 \u0432 \u043A\u043E\u0434, \u043E\u0431\u0440\u0435\u0437\u0430\u043D\u0438\u0435 \u0437\u0430\u043A\u043E\u043D\u0447\u0438\u0442\u0441\u044F \u043D\u0430 \u043A\u043E\u043D\u0446\u0435 \u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B\u044C\u043D\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438. \u0415\u0441\u0442\u044C \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B; \u0438\u0437\u0443\u0447\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 slice () , \u0447\u0442\u043E\u0431\u044B \u0443\u0437\u043D\u0430\u0442\u044C, \u0447\u0442\u043E \u0435\u0449\u0435 \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0437\u043D\u0430\u0442\u044C.

\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430

\u0421\u0442\u0440\u043E\u043A\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B toLowerCase () \u0438 toUpperCase () \u043F\u0440\u0435\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u044B\u0432\u0430\u044E\u0442 \u0432\u0441\u0435 \u0441\u0438\u043C\u0432\u043E\u043B\u044B \u0432 \u0441\u0442\u0440\u043E\u043A\u0435 \u0432 \u043D\u0438\u0436\u043D\u0438\u0439 \u0438\u043B\u0438 \u0432\u0435\u0440\u0445\u043D\u0438\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u043E. \u042D\u0442\u043E\u0442 \u0441\u043F\u043E\u0441\u043E\u0431 \u043C\u043E\u0436\u043D\u043E \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C, \u0435\u0441\u043B\u0438 \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u043D\u043E\u0440\u043C\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0432\u0441\u0435 \u0432\u0432\u0435\u0434\u0435\u043D\u043D\u044B\u0435 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u043C \u0434\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u0434 \u0438\u0445 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435\u043C \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043D\u043D\u044B\u0445.

\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0435\u043C \u0432\u0432\u0435\u0441\u0442\u0438 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0441\u0442\u0440\u043E\u043A\u0438, \u0447\u0442\u043E\u0431\u044B \u0443\u0437\u043D\u0430\u0442\u044C, \u0447\u0442\u043E \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442:

\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u0442\u0440\u043E\u043A\u0438

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u043E\u0434\u043D\u0443 \u043F\u043E\u0434\u0441\u0442\u0440\u043E\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u043D\u0430 \u0434\u0440\u0443\u0433\u0443\u044E \u043F\u043E\u0434\u0441\u0442\u0440\u043E\u043A\u0443, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u043C\u0435\u0442\u043E\u0434 replace () . \u042D\u0442\u043E\u0442 \u043C\u0435\u0442\u043E\u0434 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442 \u043E\u0447\u0435\u043D\u044C \u043F\u0440\u043E\u0441\u0442\u043E \u043D\u0430 \u0431\u0430\u0437\u043E\u0432\u043E\u043C \u0443\u0440\u043E\u0432\u043D\u0435, \u043D\u043E \u0443 \u043D\u0435\u0433\u043E \u0435\u0441\u0442\u044C \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043F\u0440\u043E\u0434\u0432\u0438\u043D\u0443\u0442\u044B\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430, \u043D\u043E \u043C\u044B \u043F\u043E\u043A\u0430 \u043D\u0435 \u0431\u0443\u0434\u0435\u043C \u0432\u0434\u0430\u0432\u0430\u0442\u044C\u0441\u044F \u0432 \u0434\u0435\u0442\u0430\u043B\u0438.

\u041E\u043D \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u0434\u0432\u0430 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430 — \u0441\u0442\u0440\u043E\u043A\u0443, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C, \u0438 \u0441\u0442\u0440\u043E\u043A\u0443, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0432\u043C\u0435\u0441\u0442\u043E \u0437\u0430\u043C\u0435\u043D\u044F\u0435\u043C\u043E\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u044D\u0442\u043E\u0442 \u043F\u0440\u0438\u043C\u0435\u0440:

\u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043D\u0438\u043C\u0430\u043D\u0438\u0435, \u0447\u0442\u043E \u0434\u043B\u044F \u0444\u0430\u043A\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F, \u043E\u0442\u0440\u0430\u0436\u0435\u043D\u043D\u043E\u0433\u043E \u0432 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 browserType \u0432 \u0440\u0435\u0430\u043B\u044C\u043D\u043E\u0439 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0435, \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 \u0432 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438; \u043E\u043D \u043D\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u043E\u0431\u043D\u043E\u0432\u043B\u044F\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u0441\u0442\u0440\u043E\u043A\u0438 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438. \u0422\u0430\u043A\u0438\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C, \u0432\u044B \u0434\u043E\u043B\u0436\u043D\u044B \u0431\u044B\u043B\u0438 \u0431\u044B \u043D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u044D\u0442\u043E:\u00A0 browserType = browserType.replace(‘moz’,’van’);

\u0410\u043A\u0442\u0438\u0432\u043D\u044B\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u044B \u043E\u0431\u0443\u0447\u0435\u043D\u0438\u044F

\u0412 \u044D\u0442\u043E\u043C \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u043C\u044B \u0434\u0430\u0434\u0438\u043C \u0432\u0430\u043C \u043F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u043D\u0430\u0431\u0438\u0442\u044C \u0440\u0443\u043A\u0443 \u0438 \u0432\u043C\u0435\u0441\u0442\u0435 \u043D\u0430\u043F\u0438\u0448\u0435\u043C \u043A\u043E\u0434 \u0441\u0442\u0440\u043E\u043A\u043E\u0432\u043E\u0439 \u043C\u0430\u043D\u0438\u043F\u0443\u043B\u044F\u0446\u0438\u0438. \u0412 \u043A\u0430\u0436\u0434\u043E\u043C \u0443\u043F\u0440\u0430\u0436\u043D\u0435\u043D\u0438\u0438 \u043D\u0438\u0436\u0435 \u0443 \u043D\u0430\u0441 \u0435\u0441\u0442\u044C \u043C\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u043E\u043A \u0438 \u0446\u0438\u043A\u043B, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043E\u0431\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u0435\u0442 \u043A\u0430\u0436\u0434\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0432 \u043C\u0430\u0441\u0441\u0438\u0432\u0435 \u0438 \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0435\u0433\u043E \u0432 \u043C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u043E\u043C \u0441\u043F\u0438\u0441\u043A\u0435. \u0412\u0430\u043C \u043D\u0435 \u043D\u0443\u0436\u043D\u043E \u043F\u043E\u043D\u0438\u043C\u0430\u0442\u044C \u043C\u0430\u0441\u0441\u0438\u0432\u044B \u0438\u043B\u0438 \u0446\u0438\u043A\u043B\u044B \u043F\u0440\u044F\u043C\u043E \u0441\u0435\u0439\u0447\u0430\u0441 — \u044D\u0442\u043E \u0431\u0443\u0434\u0435\u0442 \u043E\u0431\u044A\u044F\u0441\u043D\u0435\u043D\u043E \u0432 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044C\u044F\u0445. \u0412\u0441\u0435, \u0447\u0442\u043E \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0432 \u043A\u0430\u0436\u0434\u043E\u043C \u0441\u043B\u0443\u0447\u0430\u0435, — \u043D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u043A\u043E\u0434, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0432\u044B\u0432\u043E\u0434\u0438\u0442 \u0441\u0442\u0440\u043E\u043A\u0438 \u0432 \u0442\u043E\u043C \u0444\u043E\u0440\u043C\u0430\u0442\u0435, \u0432 \u043A\u043E\u0442\u043E\u0440\u043E\u043C \u043C\u044B \u043F\u0440\u0435\u0434\u043B\u0430\u0433\u0430\u0435\u043C.

\u0412 \u043A\u0430\u0436\u0434\u043E\u043C \u043F\u0440\u0438\u043C\u0435\u0440\u0435 \u0435\u0441\u0442\u044C \u043A\u043D\u043E\u043F\u043A\u0430 \u00ABReset\u00BB, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u043B\u044F \u0441\u0431\u0440\u043E\u0441\u0430 \u043A\u043E\u0434\u0430, \u0435\u0441\u043B\u0438 \u0432\u044B \u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043B\u0438 \u043E\u0448\u0438\u0431\u043A\u0443, \u0438 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0435\u0433\u043E \u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430, \u0430 \u043A\u043D\u043E\u043F\u043A\u0443 \u00ABShow solution\u00BB \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043D\u0430\u0436\u0430\u0442\u044C, \u0447\u0442\u043E\u0431\u044B \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u043F\u043E\u0442\u0435\u043D\u0446\u0438\u0430\u043B\u044C\u043D\u044B\u0439 \u043E\u0442\u0432\u0435\u0442, \u0435\u0441\u043B\u0438 \u0432\u044B \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0437\u0430\u0441\u0442\u0440\u044F\u043D\u0435\u0442\u0435 \u043D\u0430 \u0440\u0435\u0448\u0435\u043D\u0438\u0438.

\u0424\u0438\u043B\u044C\u0442\u0440\u0430\u0446\u0438\u044F \u043F\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439

\u0412 \u043F\u0435\u0440\u0432\u043E\u043C \u0443\u043F\u0440\u0430\u0436\u043D\u0435\u043D\u0438\u0438 \u043C\u044B \u043D\u0430\u0447\u043D\u0435\u043C \u0441 \u043F\u0440\u043E\u0441\u0442\u043E\u0433\u043E — \u0443 \u043D\u0430\u0441 \u0435\u0441\u0442\u044C \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439 \u043F\u043E\u0437\u0434\u0440\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0445 \u043E\u0442\u043A\u0440\u044B\u0442\u043E\u043A, \u043D\u043E \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u043E\u0442\u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0438\u0445, \u0447\u0442\u043E\u0431\u044B \u043F\u0435\u0440\u0435\u0447\u0438\u0441\u043B\u044F\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0440\u043E\u0436\u0434\u0435\u0441\u0442\u0432\u0435\u043D\u0441\u043A\u0438\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u044F. \u041C\u044B \u0445\u043E\u0442\u0438\u043C, \u0447\u0442\u043E\u0431\u044B \u0432\u044B \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u043B\u0438 \u0443\u0441\u043B\u043E\u0432\u043D\u044B\u0439 \u0442\u0435\u0441\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u044B if( . ), \u0447\u0442\u043E\u0431\u044B \u043F\u0440\u043E\u0432\u0435\u0440\u0438\u0442\u044C \u043A\u0430\u0436\u0434\u0443\u044E \u0441\u0442\u0440\u043E\u043A\u0443 \u0438 \u043E\u0442\u043E\u0431\u0440\u0430\u0437\u0438\u0442\u044C \u0435\u0435 \u0432 \u0441\u043F\u0438\u0441\u043A\u0435, \u0442\u043E\u043B\u044C\u043A\u043E \u0435\u0441\u043B\u0438 \u044D\u0442\u043E \u0440\u043E\u0436\u0434\u0435\u0441\u0442\u0432\u0435\u043D\u0441\u043A\u043E\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435.

\\n\\n

    \\n
  1. \u0421\u043D\u0430\u0447\u0430\u043B\u0430 \u043F\u043E\u0434\u0443\u043C\u0430\u0439\u0442\u0435 \u043E \u0442\u043E\u043C, \u043A\u0430\u043A \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0440\u043E\u0432\u0435\u0440\u0438\u0442\u044C, \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043B\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u0432 \u043A\u0430\u0436\u0434\u043E\u043C \u0441\u043B\u0443\u0447\u0430\u0435 \u0440\u043E\u0436\u0434\u0435\u0441\u0442\u0432\u0435\u043D\u0441\u043A\u0438\u043C \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435\u043C. \u041A\u0430\u043A\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u043F\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043E \u0432\u0441\u0435\u0445 \u044D\u0442\u0438\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u044F\u0445 \u0438 \u043A\u0430\u043A\u043E\u0439 \u043C\u0435\u0442\u043E\u0434 \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u043B\u044F \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0438? \\n
  2. \u0417\u0430\u0442\u0435\u043C \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0431\u0443\u0434\u0435\u0442 \u043D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u0443\u0441\u043B\u043E\u0432\u043D\u044B\u0439 \u0442\u0435\u0441\u0442 operand1 operator operand2. \u0421\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043B\u0438 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0441\u043B\u0435\u0432\u0430 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0443 \u0441\u043F\u0440\u0430\u0432\u0430? \u0418\u043B\u0438 \u0432 \u044D\u0442\u043E\u043C \u0441\u043B\u0443\u0447\u0430\u0435 \u0432\u044B\u0437\u043E\u0432 \u043C\u0435\u0442\u043E\u0434\u0430 \u0441\u043B\u0435\u0432\u0430 \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0441\u043F\u0440\u0430\u0432\u0430? \\n
  3. \u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430. \u0412 \u044D\u0442\u043E\u043C \u0441\u043B\u0443\u0447\u0430\u0435, \u0432\u0435\u0440\u043E\u044F\u0442\u043D\u043E, \u0431\u043E\u043B\u0435\u0435 \u043F\u043E\u043B\u0435\u0437\u043D\u043E \u043F\u0440\u043E\u0432\u0435\u0440\u0438\u0442\u044C, \u043D\u0435 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043B\u0438\u00A0 \u0447\u0430\u0441\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0438 \u043D\u0435 \u0440\u0430\u0432\u043D\u043E\u0439 (!==) \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u043E\u043C\u0443 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0443. \\n

\\n\\n

Playable code

\u0418\u0441\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430 (\u0440\u0430\u0437\u043C\u0435\u0440\u0430 \u0431\u0443\u043A\u0432 \u0432 \u0442\u0435\u043A\u0441\u0442\u0435-\u043F\u0440\u0438\u043C. \u043F\u0435\u0440.)

\u0412 \u044D\u0442\u043E\u043C \u0443\u043F\u0440\u0430\u0436\u043D\u0435\u043D\u0438\u0438 \u0443 \u043D\u0430\u0441 \u0435\u0441\u0442\u044C \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u044F \u0433\u043E\u0440\u043E\u0434\u043E\u0432 \u0432 \u0421\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u043D\u043E\u043C \u041A\u043E\u0440\u043E\u043B\u0435\u0432\u0441\u0442\u0432\u0435, \u043D\u043E \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u043D\u044B\u0445 \u0440\u0430\u0437\u043D\u044B\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u043E\u043C. \u041C\u044B \u0445\u043E\u0442\u0438\u043C, \u0447\u0442\u043E\u0431\u044B \u0432\u044B \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0438 \u0438\u0445 \u0442\u0430\u043A, \u0447\u0442\u043E\u0431\u044B \u043E\u043D\u0438 \u0431\u044B\u043B\u0438 \u0432 \u043D\u0438\u0436\u043D\u0435\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435, \u0437\u0430 \u0438\u0441\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u0435\u043C \u043F\u0435\u0440\u0432\u043E\u0439 \u0431\u0443\u043A\u0432\u044B. \u0425\u043E\u0440\u043E\u0448\u0438\u0439 \u0441\u043F\u043E\u0441\u043E\u0431 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u044D\u0442\u043E:

\\n\\n

    \\n
  1. \u041F\u0440\u0435\u043E\u0431\u0440\u0430\u0437\u0443\u0439\u0442\u0435 \u0432\u0441\u044E \u0441\u0442\u0440\u043E\u043A\u0443, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0449\u0443\u044E\u0441\u044F \u0432 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 input, \u0432 \u043D\u0438\u0436\u043D\u0438\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440 \u0438 \u0441\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u0435 \u0435\u0435 \u0432 \u043D\u043E\u0432\u043E\u0439 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439. \\n
  2. \u0412\u043E\u0437\u044C\u043C\u0438\u0442\u0435 \u043F\u0435\u0440\u0432\u0443\u044E \u0431\u0443\u043A\u0432\u0443 \u0441\u0442\u0440\u043E\u043A\u0438 \u0432 \u044D\u0442\u043E\u0439 \u043D\u043E\u0432\u043E\u0439 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 \u0438 \u0441\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u0435 \u0435\u0435 \u0432 \u0434\u0440\u0443\u0433\u043E\u0439 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439. \\n
  3. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u044D\u0442\u0443 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u044E\u044E \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u0443\u044E \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u043E\u0434\u0441\u0442\u0440\u043E\u043A\u0438, \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u0435 \u043F\u0435\u0440\u0432\u0443\u044E \u0431\u0443\u043A\u0432\u0443 \u0441\u0442\u0440\u043E\u0447\u043D\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0431\u0443\u043A\u0432\u043E\u0439 \u0441\u0442\u0440\u043E\u0447\u043D\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438, \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u043D\u043E\u0439 \u043D\u0430 \u0432\u0435\u0440\u0445\u043D\u0438\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440. \u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u0435 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u044D\u0442\u043E\u0439 \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u0437\u0430\u043C\u0435\u043D\u044B \u0432 \u0434\u0440\u0443\u0433\u043E\u0439 \u043D\u043E\u0432\u043E\u0439 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439. \\n
  4. \u0418\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 result \u043D\u0430 \u0440\u0430\u0432\u043D\u0443\u044E \u043A\u043E\u043D\u0435\u0447\u043D\u043E\u043C\u0443 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0443 (\u043D\u0435 input ). \\n

\\n\\n

\u0417\u0430\u043C\u0435\u0442\u043A\u0430: \u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 — \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u043E\u0432\u044B\u0445 \u043C\u0435\u0442\u043E\u0434\u043E\u0432 \u043D\u0435 \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E \u0434\u043E\u043B\u0436\u043D\u044B \u0431\u044B\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u043E\u0432\u044B\u043C\u0438 \u043B\u0438\u0442\u0435\u0440\u0430\u043B\u0430\u043C\u0438; \u043E\u043D\u0438 \u0442\u0430\u043A\u0436\u0435 \u043C\u043E\u0433\u0443\u0442 \u0431\u044B\u0442\u044C \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u043C\u0438 \u0438\u043B\u0438 \u0434\u0430\u0436\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u043C\u0438 \u0441 \u0432\u044B\u0437\u044B\u0432\u0430\u0435\u043C\u044B\u043C \u0438\u043C\u0438 \u043C\u0435\u0442\u043E\u0434\u043E\u043C.

Возвращает самую длинную строку в массиве (JavaScript)

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

но если я изменяю long1= arr[i].length; на long1 = arr[i]; , он просто возвращает arr[0] . Я что-то упустил? Кажется, что петля корректно итерации.

Изменить: это означает, что он возвращает bbllkw .

Просто вы должны изменить длинную декларацию на:

и в условии цикла for это должно быть

Вместо этого вы можете использовать reduce :

Обновлен после того, как пользователю было предложено более базовое решение

Здесь мы находим самую длинную длину элемента массива с помощью функции reduce , а затем фильтруем массив с элементами, которые имеют такую ​​длину с помощью функции filter . Он возвращает нам несколько элементов, если они имеют одинаковую, но самую длинную длину

Старый ответ

Если в массиве есть более одной самой длинной строки, она вернет массив из них. Если есть только один длинный, он вернет строку, а не массив.

Просто сравните длину строк, а затем присвойте самой строке long1.

Проблема заключается в том, что вы устанавливаете

И вы сравниваете с длиной, которая является целым значением.

Сначала итерация сравнивает целочисленное значение 0 с длиной первой строки, которая, конечно же, делает результат выражения сравнения true, и вы устанавливаете

Для следующей итерации long1 больше не содержит целочисленное значение, а строка, поэтому сравнение между длиной и long1 всегда возвращает false.

Вот почему вы всегда получаете первую строку в качестве результата.

Вам нужно инициализировать long1 как пустую строку и использовать long1.length для сравнения, как предложено ответом belhadj.

JavaScript: методы работы со строками

Когда пишешь JavaScript, очень часто приходится лазить по интернету в поисках информации о синтаксисе и параметрах для методов, работающих со строками.

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

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

Конвертирование в String

Вы можете конвертировать число, булево выражение или объект в строку:

Вы можете сделать это так же с помощью String():

Если вы не уверены, что значение не является null или undefined, вы можете использовать String(), которая всегда возвращает строку, независимо от типа значения.

Разделение строки в подстроки

Чтобы разделить строки в массив подстрок, вы можете использовать метод split():

Как видно в последней строке, второй параметр функции — это лимит количества элементов, которое будет в итоговом массиве.

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

Чтобы найти, сколько символов в строки, мы используем свойство length:

Поиск подстроки в строке

Есть два метода для поиска подстроки:

Использование indexOf():

indexOf() метод начинает поиск подстроки с начала строки, и возвращает позицию начала первого вхождения подстроки. В данном случае — 7 позиция.

Использование lastIndexOf():

Метод возвращает начальную позицию последнего вхождения подстроки в строку.

В обоих методах, если подстрока не найдена, возвращается значение -1, и оба принимают необязательный второй аргумент, указывающий положение в строке, где вы хотите начать поиск. Таким образом, если второй аргумент «5», indexOf() начинает поиск с 5 символа, игнорируя символы 0-4, в то время как lastIndexOf() начинает поиск с символа 5 и идет в обратном направлении, игнорируя символы 6 и дальше.

Замена подстроки

Чтобы заменить вхождение подстроки в строке на другую подстроку, вы можете использовать replace():

Первый аргумент — то, что вы хотите заменить и второй аргумент — новая строка. Функция заменяет только первое вхождение подстроки в строку.

Чтобы заменить все вхождения, нужно использовать регулярное выражение с глобальным флагом:

Второй аргумент может включать специальный шаблон или функцию. Подробней можно почитать здесь.

Получить символ по заданной позиции в строке

Получить символ мы можем с помощью функции charAt():

Как часто бывает в JavaScript, первая позиция в строке начинается с 0, а не с 1.

В качестве альтернативной функции можно использовать charCodeAt() функцию, которая код символа.

Заметьте, что код для символа «F» (11 позиция) другой, нежели у символа «f» (позиция 7).

Соединение строк

В большинстве случаем, чтобы соединить строки, можно использовать оператор «+». Но так же можно использовать метод concat():

Таким способом мы можем соединить множество строк в одну в том порядке, в котором они записаны:

Извлечение подстроки

Есть 3 способа получения строки из части другой строки:

Используя slice():

Используя substring():

В обеих функция первый параметр — символ, с которого начинает подстрока (начиная с 0 позиции) и второй аргумент (необязательный) — позиция символа, до которого возвращается подстрока. В примере (5, 10) возвращается строка между позицией 5 и 9.

Используя substr():

Перевод строки в верхний или нижний регистр.

Другие 2 переводят строку в нижний регистр:

Лучше использовать «locale» методы, т.к. в разных местах, например, в Турции отображение регистров работает не совсем так, как мы привыкли и поэтому результат может быть тот, который мы хотели. Если использовать «locale» методы, то таких проблем не будет.

Pattern Matching

Соответствие по шаблону в строке может быть использовано с помощью 2-х методов, которые работают по-разному.

Метод match() применяется к строке и он принимает в качестве параметра регулярное выражение:

Метод exec() применяется к объекту регулярного выражения и принимает в качестве параметра строку:

В обоих методах возвращается лишь первое совпадение. Если совпадений не было — возвращается null.

Так же можно использовать метод search(), который принимает регулярное выражение и возвращает позицию первого совпадения по шаблону:

Если совпадений не было — возращается «-1«.

Сравнение двух строк для сортировки

Вы можете сравнить 2 строки, чтобы определить, какая их них идет первая по алфавиту. Для этого воспользуемся методом localeCompare(), который возвращает 3 возможных значения:

Как было показано выше, отрицательное число возвращается, если строковый аргумент идет после исходной строки. Положительное число, если строковый аргумент идет раньше исходной строки. Если вернулся — значит строки равны.

Для проверки возвращаемого значения лучше использовать if ( result Автор статьи: Alex. Категория: JavaScript
Дата публикации: 19.03.2013

Мастер Йода рекомендует:  Условные комментарии для IE
Добавить комментарий