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从我的数据中的语句数组创建一个多行对象。

我有一个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示例而被钉死，其中“minimal”是我被钉上的部分。也就是说，这是我的代码的顶部。

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();
    }
  }
}

我补充说，只是为我想要分割的数据类型提供上下文。我可以分两个点进行拆分：在setup中创建的statement数组，或者从构造函数中创建statements数组。这意味着如果我进入我的数据文件并将\n添加到我想要拆分的位置，这很容易，因为只有20个语句，最好如何以及在哪里构建将要拆分的RegExp那些线？

Answer 1

我不知道如果我完全理解你想要的，但是你可以用它来从模板中获取数组

＆＃13;

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);

＆＃13;

基本上，我使用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);

在JavaScript / p5.js

2 个答案: