javascript - 如何使用 charAt 处理 JS 字符串中的空格

Question

我正在制作一个将文本字符串转换为图形字母的新闻行情。这些字母是使用 Canvas 绘制的。创建字母的函数除了一件事外工作完美:它无法处理我传递给它的字符串中的空格。

下面是将字符串转换为图形形式的函数:

function conv_string(str) {
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i).toLowerCase());
    make_letter(str.charAt(i).toLowerCase(), i);
    }
}

conv_string('New Brushes');

这个函数非常简单，它只是获取字符串中的每个字符并将其与该字符在字符串中的位置一起传递给另一个函数 (make_letter();)。现在，它会正确地呈现单词“new”，但是当它到达空格时它会停止。 make_letter(); 函数工作正常。 Here is the current fiddle .

这是 make_letters(); 函数:

function make_letter(letter, pos) {
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
    var w = parseInt(getComputedStyle(c).width);
    var h = parseInt(getComputedStyle(c).height);
    var full = Math.floor(h / 16);
    var gap = 0.65;
    var unit = full - gap;
    var capH = (full * 5) - gap;
    var inv = {
        a: [
            [0, 2],
            [1, 1],
            [1, 3],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [2, 4],
            [3, 0],
            [3, 4],
            [4, 0],
            [4, 4]
        ],
        b: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [3, 0],
            [3, 4],
            [4, 0],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        c: [
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 0],
            [1, 4],
            [2, 0],
            [3, 0],
            [3, 4],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        d: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 4],
            [3, 0],
            [3, 4],
            [4, 0],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        e: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [0, 4],
            [1, 0],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [3, 0],
            [4, 0],
            [4, 1],
            [4, 2],
            [4, 3],
            [4, 4]
        ],
        f: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [0, 4],
            [1, 0],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [3, 0],
            [4, 0]
        ],
        g: [
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 0],
            [2, 0],
            [2, 2],
            [2, 3],
            [2, 4],
            [3, 0],
            [3, 4],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        h: [
            [0, 0],
            [0, 4],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [2, 4],
            [3, 0],
            [3, 4],
            [4, 0],
            [4, 4]
        ],
        i: [
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 2],
            [2, 2],
            [3, 2],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        j: [
            [0, 4],
            [1, 4],
            [2, 4],
            [3, 4],
            [4, 3],
            [4, 2],
            [3, 1],
            [2, 1]
        ],
        k: [
            [0, 0],
            [1, 0],
            [2, 0],
            [3, 0],
            [4, 0],
            [2, 1],
            [2, 2],
            [1, 3],
            [3, 3],
            [0, 4],
            [4, 4]
        ],
        l: [
            [0, 0],
            [1, 0],
            [2, 0],
            [3, 0],
            [4, 0],
            [4, 1],
            [4, 2],
            [4, 3],
            [4, 4]
        ],
        m: [
            [0, 0],
            [1, 0],
            [2, 0],
            [3, 0],
            [4, 0],
            [1, 1],
            [2, 2],
            [1, 3],
            [0, 4],
            [1, 4],
            [2, 4],
            [3, 4],
            [4, 4]
        ],
        n: [
            [0, 0],
            [1, 0],
            [2, 0],
            [3, 0],
            [4, 0],
            [1, 1],
            [2, 2],
            [3, 3],
            [0, 4],
            [1, 4],
            [2, 4],
            [3, 4],
            [4, 4]
        ],
        o: [
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 4],
            [3, 0],
            [3, 4],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        p: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 4],
            [1, 0],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [3, 0],
            [4, 0]
        ],
        q: [
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 4],
            [3, 0],
            [3, 3],
            [3, 4],
            [4, 1],
            [4, 2],
            [4, 3],
            [4, 4]
        ],
        r: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [1, 4],
            [1, 0],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [3, 0],
            [3, 3],
            [4, 4],
            [4, 0]
        ],
        s: [
            [0, 1],
            [0, 2],
            [0, 3],
            [0, 4],
            [1, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [3, 4],
            [4, 3],
            [4, 2],
            [4, 1],
            [4, 0]
        ],
        t: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [0, 4],
            [1, 2],
            [2, 2],
            [3, 2],
            [4, 2]
        ],
        u: [
            [0, 0],
            [0, 4],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 4],
            [3, 0],
            [3, 4],
            [4, 1],
            [4, 2],
            [4, 3]
        ],
        v: [
            [0, 0],
            [0, 4],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 4],
            [3, 1],
            [3, 3],
            [4, 2]
        ],
        w: [
            [0, 0],
            [0, 4],
            [1, 0],
            [1, 4],
            [2, 0],
            [2, 2],
            [2, 4],
            [3, 0],
            [3, 1],
            [3, 3],
            [3, 4],
            [4, 0],
            [4, 4]
        ],
        x: [
            [0, 0],
            [1, 1],
            [2, 2],
            [3, 3],
            [4, 4],
            [0, 4],
            [1, 3],
            [3, 1],
            [4, 0]
        ],
        y: [
            [0, 0],
            [1, 1],
            [2, 2],
            [3, 2],
            [4, 2],
            [1, 3],
            [0, 4]
        ],
        z: [
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [0, 4],
            [1, 3],
            [2, 2],
            [3, 1],
            [4, 0],
            [4, 1],
            [4, 2],
            [4, 3],
            [4, 4]
        ],
        exc: [
            [0, 2],
            [1, 2],
            [2, 2],
            [4, 2]
        ],
        spc: []
    };
    for (var i = 0; i < inv[letter].length; i++) {
        var x = inv[letter][i][1] * full;
        var y = inv[letter][i][0] * full;
        if (pos == 0) {
            var xpos = x;
        } else {
            var xpos = x + ((pos * full) * 5) + (full * pos);
        }
        context.beginPath();
        context.rect(xpos, y, unit, unit);
        context.fillStyle = 'black';
        context.closePath();
        context.fill();
    }
}

我认为问题在于 charAt 如何处理空格。如您所见，我尝试在控制台中记录从 charAt(); 返回的值，但是当它找到空格时，它只返回一个空格。当它找到一个空格时，我怎样才能从这个字符串中得到一个真实的、有形的值呢？

如果您看一下 make_letter(); 函数，您会发现它依赖于从 charAt(); 接收到的值的比较.因此，如果遇到空格，我需要能够将它与我在对象中设置的值进行比较，但是如何将空格与另一个值进行比较呢？除了 charAt(); 之外还有什么我应该使用的吗？

Answer 1

您实质上是在尝试将字符映射到它们的名称和 ' '.toLowerCase() !== 'spc' 的结果。名称错误，导致抛出异常。

将 spc 键更改为 ' ' 可修复错误，如 you can see here .