如何在打字稿中将数组分成多行？

Question

我在创建 pdf 的函数中遇到了一个小问题（也许不是那么难）。 这是我第一次使用打字稿，所以答案可能很简单，我只是看不到它：P（我是编程初学者（1年））

我需要确保，如果一家公司的名称很长（最多 180 个字母），则 pdf 看起来仍然不错，并且长名称将分成多行。

我有 180 个字母的 companyName。 "Firmenname der vollkommen fiktiv ist um eine PDF für den maximalst unwahrscheinlichsten Firmennamen anzupassen damit es noch gut oder zumindest passabel aussieht da es sich um ein。"

我设法将它分成 3 行，但第二行有问题，因为这一行不会停在 60 个字母处。 [在此处输入图片说明][1]

我的拆分代码如下。所以，基本上“company2”的结果就是问题所在。

else if (companyLength > 120 && companyLength <= 180) {
    let words = companyName.split(' ');
    let newLength = 0;
    let company1 = '';
    let company2 = '';
    let company3 = '';
    let i = 0;
    let o = 0;
    let j = 0;
    let k = 0;        
    while (newLength + words[i].length <= 60) {
        newLength += words[i].length + 1;
        i++;
        o++;
        o++;
    }
    for (j = 0; j < i; j++) {
        company1 += words[j] + ' ';
    }
    
    for (k = j; k < words.length; k++) {
        company2 += words[k] + ' ';
    }
    for (let f = o; f < words.length; f++) {
        company3 += words[f] + ' ';
    }
    doc.text(company1, 22, 46);
    doc.text(company2, 22, 50);
    doc.text(company3, 22, 54);

有没有人提示我如何实现预期的结果，所以第二行不会突破边界并正确中断？

提前感谢您的帮助。 [1]：https://i.stack.imgur.com/2akxs.png

Answer 1

如果您并不特别需要将其拆分为三行，并且只希望在您的限制范围内尽可能长的第一行（也许您随机选择了 3 行，因为您需要将其拆分为最多？） .

由于您没有在代码中明确使用 typescript，并且可以从这么简单的事情中推断出类型，因此在 javascript 中的答案将是相同的 - 它类似于这个问题：How can I set a character limit of 100 without splitting words?

const name = "Firmenname der vollkommen fiktiv ist um eine PDF für den maximalst unwahrscheinlichsten Firmennamen anzupassen damit es noch gut oder zumindest passabel aussieht da es sich um ein."

// guessing this is the max line length you want?
const maxLineLength = 120

// Split it by spaces with regex
const words = name.split(/\s+/)

const chunks = words.reduce((prev, curr) => {
    if (prev.length && (prev[prev.length - 1] + ' ' + curr).length <= maxLineLength) {
        prev[prev.length - 1] += ' ' + curr;
    }
    else {
        prev.push(curr);
    }
    return prev;
}, []);

//print the split lines to check
chunks.forEach((str) => {
    console.log(str);
});

//"Firmenname der vollkommen fiktiv ist um eine PDF für den maximalst unwahrscheinlichsten Firmennamen anzupassen damit es"
//"noch gut oder zumindest passabel aussieht da es sich um ein."

Answer 2

这有帮助吗？ 解释在 cmets 中

const name = "Firmenname der vollkommen fiktiv ist um eine PDF für den maximalst unwahrscheinlichsten Firmennamen anzupassen damit es noch gut oder zumindest passabel aussieht da es sich um ein."

function process(name) {
  // if length is less than 180, only one row
  if (name.length < 180) return [name]
  
  // otherise three strings for each row
  // each is array of characters which joined later
  const parts = [[], [], []]
  let partsIdx = 0

  for (const char of name) {
    parts[partsIdx].push(char)
  
    // if the current row has already 60 characters
    // and is not the last row
    if (partsIdx != (parts.length - 1) && parts[partsIdx].length >= 60) {
      partsIdx++
    }
  }
  
  // join the array of characters to form strings
  return parts.map(p => p.join(''))
}

console.log(process(name))