0

我有一个 .csv 文件，我通过 p5.js 草图在 JavaScript 中调用它。其中一个字段包含范围从 103 字符到 328 字符的句子。我的脚本调用数据并随机显示在画布上。因为有些句子很长，它们不适合画布，所以我想把它们分成两行或三行的字符串。

我已经阅读了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 数组创建一个多行对象。

我有 aconstructor和 aprototype来格式化句子的颜色、大小、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拆分这些行的最佳方法？

4

2 回答 2

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，最后修剪它。

于 2016-06-11T12:13:42.213 回答
0

我认为另一个答案有点过度思考。

P5.js 已经有一个split()你应该使用的方便的函数。您可以在此处的参考资料中了解它。

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

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

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

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

text(this.statement[0], this.x, this.y);
text(this.statement[1], this.x, this.y+25);
于 2016-06-13T11:25:39.197 回答