如何使用 charAt 处理 JS 字符串中的空格答案

【问题标题】：How to handle a space in a JS string using charAt如何使用 charAt 处理 JS 字符串中的空格
【发布时间】：2023-03-21 12:45:02
【问题描述】：

我正在制作一个将文本字符串转换为图形字母的新闻自动收报机。字母是使用画布绘制的。创建字母的函数可以完美运行，除了一件事：它无法处理我传递给它的字符串中的空格。

这是将字符串转换为图形形式的函数：

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();)，以及该字符在字符串中的位置。现在，它会正确呈现“新”这个词，但是当它到达空间时它会停止。 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(); 之外，我还应该使用其他什么吗？

【问题讨论】：

标签： javascript string charat

【解决方案1】：

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

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

【讨论】：

感谢您的回答。虽然这种方式可行，但与 T.J. 一起使用似乎更干净一些。克劳德的回答只是因为我认为这可能是更好的做法，并且可以防止未来的错误。我很感谢你的帮助，所以我投票给你。再次感谢。
@DigitalBrent 我们做了同样的改变，他只是在回答中解释得更透彻。 ;)
他还推荐了我在您的回答中没有看到的 charCodeAt。尽管如此，我总是感谢我得到的任何帮助。
他做到了。这可能是一个更好的答案。
不过，为了简洁，有话要说。你的第一句话非常清楚。 :-)

【解决方案2】：

我认为问题在于charAt 如何处理空格。如您所见，我尝试在控制台中记录从charAt(); 返回的值，但是当它找到空间时，它只返回一个空格。

是的，这就是它的工作。 charAt 为您提供给定位置的角色。

当它找到一个空格时，我怎样才能从这个字符串中获得一个真实的、有形的价值？

您可以使用charCodeAt获取字符代码。

因此，如果遇到空格，我需要能够将其与我在对象中设置的值进行比较，但是如何将空格与另一个值进行比较？

比较空间没有什么特别之处。但是，使用空格作为属性名有一些特别之处，正如您可能希望在 inv 对象中那样。最后你有：

spc: []

...创建一个名为spc 的属性。当然，这与空间不同。如果您愿意，可以创建一个带有空格的属性：

" ": []

同样，charAt 给你的任何东西都不会匹配这个：

exc: [
    [0, 2],
    [1, 2],
    [2, 2],
    [4, 2]
],

我不知道exc 是什么意思，但如果是!，那么：

"!": [
    [0, 2],
    [1, 2],
    [2, 2],
    [4, 2]
],

您可以使用 any 字符串作为对象初始化器中的属性名称，只需将其放在引号中。

【讨论】：

使用 charCodeAt 方法似乎更好。我可能会用那个。感谢您的帮助。
@DigitalBrent：如果是我，我可能会选择另一种方式，使用" ": [] 和"!": [...]（如果我这样做的话，我可能会将它们都放在引号中以保持一致性），但很高兴在任何情况下都有帮助。

【解决方案3】：

只需替换

spc: []

与

' ': []

【讨论】：