Как сделать лучше функцию на js?

Question

У меня возникла проблема- я сделал функцию на js, но мне она кажется не очень то "красивой". В общем, как сделать это лучше и короче)

Я сделал функцию, которая меняет теги span в зависимости от n. К примеру, если n==2, то возвращается 2 тега span c классом "activation". Буду рад любой помощи!

 function func(n) {
    
    
      if (n == 1) {
        return `<span class="activation"></span>
                <span ></span>
                <span ></span>
                <span ></span>
                <span></span>
                `
      }
      if (n == 2) {
        return `<span class="activation"></span>
                <span class="activation"></span>
                <span ></span>
                <span ></span>
                <span></span>
                `
      }
    
      if (n == 3) {
        return `<span class="activation"></span>
                <span class="activation"></span>
                <span class="activation"></span>
                <span></span>
                <span></span>
                `
      }
      if (n == 4) {
        return `<span class="activation"></span>
                <span class="activation"></span>
                <span class="activation"></span>
                <span class="activation"></span>
                <span></span>
                `
      }
      if (n == 5) {
        return `<span class="activation"></span>
                <span class="activation"></span>
                <span class="activation"></span>
                <span class="activation"></span>
                <span class="activation"></span>
                `
      } {
        return `<span ></span>
                <span ></span>
                <span ></span>
                <span ></span>
                <span ></span>`
      }
    }

Answer 1

циклы в помощь

function func(n) {
    let result = '';
    for(i = 1; i <= 5; i++){
       let cls = (i <= n) ? 'class="activation"' : '';
       result += `<span ${cls}></span>\n`;
    }   
    return result;
}

Answer 2

Как вариант...

function func(n) {
  if (!n || isNaN(+n) || n < 1 || n > 5) n = 0;
  return `<span class="activation"></span>\n`.repeat(n) + `<span></span>\n`.repeat(5 - n);
}
console.log(func(4));

Answer 3

Попробуй это:

function func(n) {
  const rowsCount = 5;
  const activeRowsCount = n < 6 ? n : 0;
  const notActiveRowsCount = rowsCounst - activeRowsCount;
  let result = '';

  for (let i = 0; i < activeRowsCount; i++) {
    result += "<span class='activasion'></span>\n";
  }

  for (let i = 0; i < notActiveRowsCount; i++) {
    result += "<span></span>\n";
  }
}

БЛОГ НА HUSL

Как сделать лучше функцию на js?

Ответы (3 шт):