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

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

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

var string = 'This is my string';

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

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

Let's enter some examples into a fresh console. We've provided one below (you can also open this console in a separate tab or window, or use the browser developer console if you'd prefer).

Hidden code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript console</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </style>
  </head>
  <body>

    
  </body>

  <script>
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class', 'input');
      inputPara.textContent = '>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }
    
    createInput();

  </script>
</html>

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

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

var browserType = 'mozilla';
browserType.length;

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

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

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

browserType[0];

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

browserType[browserType.length-1];

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

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

  1. Иногда вам нужно найти, существует ли меньшая строка внутри большей (мы обычно говорим, что подстрока присутствует внутри строки). Это можно сделать с помощью метода indexOf (), который принимает один {{ глоссарий }} - подстроку, которую вы хотите искать. Попробуйте это:
    browserType.indexOf('zilla');
    Это дает нам результат 2, потому что подстрока «zilla» начинается в позиции 2 (0, 1, 2 - так 3 символа) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, у нас может быть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
  1. Это можно сделать по-другому, что, возможно, еще более эффективно. Попробуйте следующее:
    browserType.indexOf('vanilla');
    Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.

    Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla», или, если вы используете оператор отрицания, как показано ниже. Вы могли бы сделать что-то вроде этого:
    if(browserType.indexOf('mozilla') !== -1) {
      // сделать что-то со строкой
    }
  2. Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите ее завершить, можно использовать slice ()  для извлечения. Попробуйте следующее:
    browserType.slice(0,3);
    Это возвращает «moz» - первым параметром является позиция символа для начала извлечения, а второй параметр - позиция символа, перед который нужно отсечь строку. Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая ее (помним, что счет идет с 0, а не с 1 - прим. переводчика). Также можно сказать, что второй параметр равен длине возвращаемой строки.
  3. Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определенного символа, вам не нужно включать второй параметр! Вместо этого вам нужно включить только положение символа, из которого вы хотите извлечь оставшиеся символы в строке. Попробуйте следующее:
    browserType.slice(2);
    Это возвращает «zilla» - это потому, что позиция символа 2 - это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.

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

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

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

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

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

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

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

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

browserType.replace('moz','van');

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

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

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

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

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

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

  1. Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
  2. Затем вам нужно будет написать условный тест operand1 operator operand2. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
  3. Подсказка. В этом случае, вероятно, более полезно проверить, не является ли  часть строки не равной (!==) определенному результату.
Playable code
<div class="output" style="min-height: 125px;">

<ul>

</ul>

</div>

<textarea id="code" class="playable-code" style="height: 290px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

for (var i = 0; i < greetings.length; i++) {
  var input = greetings[i];
  // Your conditional test needs to go inside the parentheses
  // in the line below, replacing what's currently there
  if (greetings[i]) {
    var result = input;
    var listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

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

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

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

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

Playable code 2
<div class="output" style="min-height: 125px;">

<ul>

</ul>

</div>

<textarea id="code" class="playable-code" style="height: 250px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
for(var i = 0; i < cities.length; i++) {
  var input = cities[i];
  // write your code just below here

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

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

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

MAN675847583748sjt567654;Manchester Piccadilly

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

MAN: Manchester Piccadilly

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

  1. Извлеките трехбуквенный код станции и сохраните его в новой переменной.
  2. Найдите номер символьного номера точки с запятой.
  3. Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
  4. Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
  5. Измените значение переменной result равной конечной строке, (не input).
Playable code 3
<div class="output" style="min-height: 125px;">

<ul>

</ul>

</div>

<textarea id="code" class="playable-code" style="height: 285px;">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

for (var i = 0; i < stations.length; i++) {
  var input = stations[i];
  // write your code just below here   

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var result = code + \': \' + name;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';


textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

Заключение

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

 

In this module

 

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: samofand, AndrewSamofalov
 Обновлялась последний раз: samofand,