Повернуть строку в JavaScript

Я новичок в кодировании. Я хочу написать JS-программу для периодического поворота строки (в правильном направлении), каждый раз удаляя последний символ и присоединяя его к началу. Но когда я запускаю свой код, вся строка или вся страница будет заполнена строкой. Что не так с моим кодом?

Я определил функцию, которая: 1. сохраняет содержимое элемента HTML p в переменной; 2. изменяет значение переменной на новую строку с последним символом исходной строки, прикрепленным к ее началу; 3. изменяет содержимое элемента p на новую строку и 4. повторяет этот процесс, используя метод setInterval.

function animation() {

  var text = document.getElementsByTagName("p")[0].innerHTML;

  setInterval(function() {

    text = text.substring(text.length - 1, 0) + text.substring(0, text.length - 2);
    document.getElementsByTagName("p")[0].innerHTML = text;

  }, 100);

}
<body onload = "animation()">
  <p>JavaScript</p>
</body>

Результат:

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

Darryl Noakes 10.06.2023 07:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
1
58
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я думаю, что проблема может быть в вашей индексации подстроки. Вы ссылаетесь на substring(text.length - 1, 0), который возвращает строку от предпоследнего до первого символа. Кажется, вам нужен только последний символ, который будет substring(text.length - 1, text.length).

Я также изменил text.substring(0, text.length - 2) на text.substring(0, text.length - 1), потому что вам, кажется, нужна вся строка без последнего символа, а не минус два последних символа.

Достигает ли это вашей цели?

function animation() {

  let text = document.getElementsByTagName("p")[0].innerHTML;

  setInterval(function() {

    text = text.substring(text.length - 1, text.length) + text.substring(0, text.length - 1);
    document.getElementsByTagName("p")[0].innerHTML = text;

  }, 100);

}
<body onload = "animation()">
  <p>JavaScript</p>
</body>

Для справки, подстрока (MDN) работает так:

подстрока (indexStart, indexEnd)

Метод substring() возвращает часть строки от начального индекса до конечного индекса, исключая его, или до конца строки, если конечный индекс не указан.

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

function animation() {
  var text = document.getElementsByTagName("p")[0];

  setInterval(function() {
    text.innerHTML = text.innerHTML.at(-1) + text.innerHTML.slice(0, -1)
  }, 100);
}
<body onload = "animation()">
  <p>JavaScript</p>
</body>
Ответ принят как подходящий

Я считаю, что ваша проблема заключается в небольшом непонимании того, как работают функции подстроки: text.substring(text.length - 1, 0) не обязательно имеет большой смысл, потому что начальная точка находится после конечной точки. В этом случае это просто эквивалентно text.substring(0, text.length - 1), что объясняет, почему ваш текст становится все больше и больше.

Замена text.substring(text.length - 1, 0) на text.substring(text.length - 1, text.length) должна помочь, и, надеюсь, понятно, почему это получает последнюю букву. Кроме того, конечный индекс не является включающим, то есть подстрока не включает символ в индексе, поэтому вам нужно заменить text.substring(0, text.length - 2) на text.substring(0, text.length - 1)

В качестве примечания: вместо того, чтобы использовать text.substring(text.length - 1, text.length) для получения последнего символа, вы можете просто использовать text[text.length - 1], чтобы получить его, что, как мне кажется, немного чище.

Вот фрагмент рабочего кода с упомянутыми изменениями:

function animation() {

  var text = document.getElementsByTagName("p")[0].innerHTML;

  setInterval(function() {

    text = text[text.length - 1] + text.substring(0, text.length - 1);
    document.getElementsByTagName("p")[0].innerHTML = text;

  }, 100);

}
<body onload = "animation()">
  <p>JavaScript</p>
</body>

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

Примечание: НЕ используйте substr; он устарел и не рекомендуется для использования. Кроме того, он отличается от substring: он «возвращает часть строки, начиная с указанного индекса и впоследствии расширяясь на заданное количество символов». (MDN, выделение мое). substring, с другой стороны, принимает начальный и конечный индексы.

Darryl Noakes 10.06.2023 07:14

@DarrylNoakes спасибо, отметил - я просто предположил, что это избыточно, я обновлю свой ответ

MilesZew 10.06.2023 07:18

лучший способ сделать это - использовать массив символов:

function animation(){
  //select the P by the id
  var p = document.getElementById("reversed");
  
  setInterval(()=>{
    let text = p.textContent; //get the text
    let  newText = [...text]; //turn it into array of chars
    let lastLetter=newText.pop();  //pop the last element
    newText.unshift(lastLetter); //add it to the start of the array
    p.textContent=newText.join("");  //update the text
  },100)
}
<body onload = "animation()">
  <p id = "reversed">JavaScript</p>
</body>

Другие вопросы по теме