在 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 中尝试过，但它似乎破坏了整个脚本，因为语句无法加载。

编辑：我有些不安地添加了这个编辑，因为我因为没有生成 Minimal, Complete, Verifiable 示例而被钉牢，而“最小”是我被钉牢的部分。也就是说，这是我的代码的顶部。

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() 函数，您应该使用它。您可以在参考文献here 中了解它。

但基本上，您真正需要做的就是将您的 statement 变量更改为数组而不是单个字符串值。

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

此代码假定您已将// 插入到您的.csv 文件中您想要换行的任何位置。你可以使用任何你想要的分隔符。

然后您必须修改您的display() 函数以将statement 变量用作数组而不是单个值。如何做到这一点取决于您，但基本语法如下所示：

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