在JavaScript / p5.js中將單行字符串拆分為多行字符串

Question

我有一個.csv文件，該文件通過p5.js草圖在JavaScript中調用。 字段之一包含從103個字符到328個字符的句子。 我的腳本調用數據並隨機顯示在畫布上。 由於某些句子很長，因此無法正確地適合畫布，因此我想將它們拆分為2或3行字符串。

我已經閱讀了JavaScript文檔中的Template Literals和RegExp ，但是所有示例都使用寫為變量的字符串變量。 因此，例如，在我的數據中是這樣的：

var myString = `We can lift up people and places who've been left out, 
        from our inner cities to Appalachia,  
        in every manufacturing town hollowed out when the factory closed, 
        every community scarred by substance abuse, 
        every home where a child goes to bed hungry.`

Template Literal將作為多行對象打印到畫布上。 但是我需要做的是讓JavaScript從數據中的statements數組創建一個多行對象。

我有一個constructor和一個prototype ，用於格式化句子的顏色，大小，x / y位置和運動。

// Function to align statements, categories, and polarity
function Statement(category, polarity, statement) {
  this.category = category;
  this.statement = statement;
  this.polarity = polarity;
  this.x = random(width/2);
  this.y = random(height);
  this.dx = random(-speed, speed);
  this.dy = random(-speed, speed);
}
// Attach pseudo-class methods to prototype;
// Maps polarity to color and x,y to random placement on canvas
Statement.prototype.display = function() {
  this.x += this.dx;
  this.y += this.dy;
  if(this.x > width+10){
    this.x = -10
  }
  if(this.y > height+10) {
    this.y = -10
  }
  if(this.polarity == -1){
    fill(205, 38, 38);
  }
  else if(this.polarity == 1){
    fill(0, 145, 205);
  }
  else{
    fill(148, 0, 211);
  }
  textSize(14);
  text(this.statement, this.x, this.y);
}

所以我想我想知道的是，是否需要創建一個RegExp ，例如String.split("[\\\\r\\\\n]+")並將\\r\\n添加到數據中，如果需要，在哪里我把它放在腳本中。 我在Statement.display.prototype嘗試過，但是由於語句無法加載，它似乎破壞了整個腳本。

編輯：我在編輯時加上一些擔心，因為我因未制作最小，完整，可驗證的示例而受到指責 ，而“最小”是我受到指責的部分。 就是說，這是我的代碼的頂部。

var clContext;
var speed = 0.8;
var statements = [];
var category = [];
var canvas;



      //load the table of Clinton's words and frequencies
function preload() {
        clContext = loadTable("cl_context_rev.csv", "header");
      }

function setup() {
  canvas = createCanvas(680, 420);
  canvas.mousePressed(inWidth);
  background(51);
  // Calling noStroke once here to avoid unecessary repeated function calls
  noStroke();
  // iterate over the table rows
  for (var i = 0; i < clContext.getRowCount(); i++) {
    var category = clContext.get(i, "category");
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
    statements[i] = new Statement(category, polarity, statement);
  }
}

function draw() {
  if (mouseIsPressed) {
    background(51);
    for (var i = 0; i < statements.length; i++) {
      statements[i].display();
    }
  }
}

我已經添加了它，只是為我要拆分的數據類型提供了上下文。 似乎可以進行拆分的兩點是：在安裝程序中創建的statement數組，或者從構造函數中創建的statements數組。 這意味着如果我進入數據文件並在要拆分的位置添加\\n （這很容易，因為只有20條語句），那么構造RegExp來拆分這些行的最佳方式和位置是什么？

Answer 1

如果我完全了解您的要求，我不知道，但是您可以使用它從模板中獲取數組

 var myString = `We can lift up people and places who've been left out, from our inner cities to Appalachia, in every manufacturing town hollowed out when the factory closed, every community scarred by substance abuse, every home where a child goes to bed hungry.` var array = myString.replace(/,/gi, "").split("\\n").map(x => x.trim()); console.log(array); 

基本上，我使用replace(/,/gi, "")刪除了示例的所有逗號，然后拆分為\\n ，最后對其進行修剪。

Answer 2

我認為其他答案對此有些懷疑。

P5.js已經具有您應該使用的便捷split()函數。 您可以參考閱讀它在這里 。

但基本上，您真正需要做的就是將statement變量更改為數組，而不是單個字符串值。

function Statement(category, polarity, statement) {
  this.statement = split(statement, "//");
  //rest of your code

此代碼假定您在要換行的任何位置.csv將//插入.csv文件。 您可以使用任何想要的分隔符。

然后，您將不得不修改display()函數以將statement變量用作數組而不是單個值。 您的操作方式取決於您，但是基本語法如下所示：

text(this.statement[0], this.x, this.y);
text(this.statement[1], this.x, this.y+25);