Как выровнять строки?

Question

[Konstantin_555]

Есть переменная str1 – это количество знаков ширина экрана. По этой ширине нужно выровнять строки.

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

var str1 = 50;
var  name1 = "абрикосы";
var  price1 = 20;

var  name2 = "тыква"
var price2 = 50;

var name3 = "уи";
var price3 = 1000;

var res;

Пример готовой функции: resRight(str1, name1, price1);

картинка

Answer 1

[Aetae]

Если шрифт моноширинный, то, условно, так:

const minGap = 3;
const keys = ['name', 'price'];  
const input = [
  {
    name: "абрикосы",
    price: 20
  },
  {
    name: "тыква",
    price: 50
  },
  {
    name: "уи",
    price: 1000
  }
];


const maxLengths = keys.slice().fill(0);
const normalizedInput = input.map(item => keys.reduce((acc, key, i) => {
  const current = String(item[key]);
  const currentLength = current.length;

  if(currentLength > maxLengths[i]) 
    maxLengths[i] = currentLength;

  acc[key] = current;   
  acc.length += currentLength;

  return acc;
}, { length: 0 }));

const maxLength = maxLengths.reduce(
  (sum, current) => sum + current, 
  minGap
);

const res = normalizedInput
  .map(({
    name, 
    price, 
    length
  }) => name + ' '.repeat(maxLength - length) + price)
  .join('\n');

Comments

[Konstantin_555]

Aetae, большое спасибо

[Konstantin_555]

Aetae, скажите пожалуйста как сделать то же самое но без использования стрелочных функций а использовать обычныe функции этот код хорошо работает в консоли но не работает в программе пишет что invalid object initializet я не могу вам написать потому что у меня нет такой возможности

[Aetae]

Konstantin_555,

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback/*, initialValue*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.reduce called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }
    var t = Object(this), len = t.length >>> 0, k = 0, value;
    if (arguments.length >= 2) {
      value = arguments[1];
    } else {
      while (k < len && ! (k in t)) {
        k++;
      }
      if (k >= len) {
        throw new TypeError('Reduce of empty array with no initial value');
      }
      value = t[k++];
    }
    for (; k < len; k++) {
      if (k in t) {
        value = callback(value, t[k], k, t);
      }
    }
    return value;
  };
}
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Положим O равным результату вызова ToObject с передачей ему
    //    значения |this| в качестве аргумента.
    var O = Object(this);

    // 2. Положим lenValue равным результату вызова внутреннего метода Get
    //    объекта O с аргументом "length".
    // 3. Положим len равным ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. Если вызов IsCallable(callback) равен false, выкидываем исключение TypeError.
    // Смотрите (en): http://es5.github.com/#x9.11
    // Смотрите (ru): http://es5.javascript.ru/x9.html#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Положим A равным новому массиву, как если бы он был создан выражением new Array(len),
    //    где Array является стандартным встроенным конструктором с этим именем,
    //    а len является значением len.
    A = new Array(len);

    // 7. Положим k равным 0
    k = 0;

    // 8. Пока k < len, будем повторять
    while (k < len) {

      var kValue, mappedValue;

      // a. Положим Pk равным ToString(k).
      //   Это неявное преобразование для левостороннего операнда в операторе in
      // b. Положим kPresent равным результату вызова внутреннего метода HasProperty
      //    объекта O с аргументом Pk.
      //   Этот шаг может быть объединён с шагом c
      // c. Если kPresent равен true, то
      if (k in O) {

        // i. Положим kValue равным результату вызова внутреннего метода Get
        //    объекта O с аргументом Pk.
        kValue = O[k];

        // ii. Положим mappedValue равным результату вызова внутреннего метода Call
        //     функции callback со значением T в качестве значения this и списком
        //     аргументов, содержащим kValue, k и O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Вызовем внутренний метод DefineOwnProperty объекта A с аргументами
        // Pk, Описатель Свойства
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true }
        // и false.

        // В браузерах, поддерживающих Object.defineProperty, используем следующий код:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // Для лучшей поддержки браузерами, используем следующий код:
        A[k] = mappedValue;
      }
      // d. Увеличим k на 1.
      k++;
    }

    // 9. Вернём A.
    return A;
  };
}
if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('can\'t convert ' + this + ' to object');
    }
    var str = '' + this;
    count = +count;
    if (count != count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count == Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    count = Math.floor(count);
    if (str.length == 0 || count == 0) {
      return '';
    }
    // Обеспечение того, что count является 31-битным целым числом, позволяет нам значительно
    // соптимизировать главную часть функции. Впрочем, большинство современных (на август
    // 2014 года) браузеров не обрабатывают строки, длиннее 1 << 28 символов, так что:
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    var rpt = '';
    for (var i = 0; i < count; i++) {
      rpt += str;
    }
    return rpt;
  }
}
if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {

      // Шаги 1-2.
      if (this == null) {
        throw new TypeError('this is null or not defined');
      }

      var O = Object(this);

      // Шаги 3-5.
      var len = O.length >>> 0;

      // Шаги 6-7.
      var start = arguments[1];
      var relativeStart = start >> 0;

      // Шаг 8.
      var k = relativeStart < 0 ?
        Math.max(len + relativeStart, 0) :
        Math.min(relativeStart, len);

      // Шаги 9-10.
      var end = arguments[2];
      var relativeEnd = end === undefined ?
        len : end >> 0;

      // Шаг 11.
      var final = relativeEnd < 0 ?
        Math.max(len + relativeEnd, 0) :
        Math.min(relativeEnd, len);

      // Шаг 12.
      while (k < final) {
        O[k] = value;
        k++;
      }

      // Шаг 13.
      return O;
    }
  });
}

var minGap = 3;
var keys = ['name', 'price'];
var input = [{
  name: "абрикосы",
  price: 20
}, {
  name: "тыква",
  price: 50
}, {
  name: "уи",
  price: 1000
}];
var maxLengths = keys.slice().fill(0);
var normalizedInput = input.map(function (item) {
  return keys.reduce(function (acc, key, i) {
    var current = String(item[key]);
    var currentLength = current.length;
    if (currentLength > maxLengths[i]) maxLengths[i] = currentLength;
    acc[key] = current;
    acc.length += currentLength;
    return acc;
  }, {
    length: 0
  });
});
var maxLength = maxLengths.reduce(function (sum, current) {
  return sum + current;
}, minGap);
var res = normalizedInput.map(function (_ref) {
  var name = _ref.name,
      price = _ref.price,
      length = _ref.length;
  return name + ' '.repeat(maxLength - length) + price;
}).join('\n');

В какой "программе" он не работает? Где ты пытаешься его запустить, в каком браузере\окружении?
Тупо js из под винды? Если да - то не стоит оно того, там движок от ie6 под капотом, больше страдания чем пользы. Если очень хочется - через hta можно под ie11 запускать, но лучше просто поставить node и пускать через неё.

[Konstantin_555]

Aetae, большое вам спасибо за помощь.
я его пытаюсь запустить на телефоне в приложении momento database это приложение для создания баз данных я его скачал на play market
Как я могу вас отблагодарить?

Answer 2

[Сергей Соколов]

на картинке шрифт не моноширинный — символы имеют разную ширину. Выровнять такой можно средствами HTML и CSS. Javascript тут не при чём.

p.s. «выровнять» пишется через «я»

Comments

[Konstantin_555]

Нужно решение на JS создать функцию которая добавит пробелы чтобы выровнять строки

[Сергей Соколов]

Konstantin_555, нужно, ок. И как вы начали решать это учебное задание? Где застряли?

[Konstantin_555]

Сергей Соколов,
Это не учебное задание я не очень силен в JS. Застрял на создании функции. и я не могу использовать HTML и CSS потому что это не для браузера

[Сергей Соколов]

Konstantin_555, ну тогда дорога на фриланс.
Легко добивать строку пробелами до нужной длины, но решит ли это вашу задачу, когда у «i» и «W» ширина заметно разная?

[Konstantin_555]

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

[Сергей Соколов]

Konstantin_555, не будет:
iiiii
WWWWW
по 5 символов

[Konstantin_555]

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

[Aetae]

Konstantin_555, если использовать моноширинный шрифт - всё будет чётко, на то он и моноширинный.
Для обычного шрифта можно в теории вычислить все размеры и подсчитывать используя сие знание. Но это не просто.)

[Konstantin_555]

Aetae, большое вам спасибо