如何使用 charAt 处理 JS 字符串中的 space
How to handle a space in a JS string using charAt
我正在制作一个将文本字符串转换为图形字母的新闻行情。这些字母是使用 canvas 绘制的。创建字母的函数除了一件事外工作完美：它无法处理我传递给它的字符串中的 spaces。
下面是将字符串转换为图形形式的函数：
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"，但是当它到达 space 时它会停止。 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 如何处理 spaces。如您所见，我尝试在控制台中记录从 charAt(); 返回的值，但是当它找到 space 时，它只是 returns 一个空白 space。当它找到 space 时，如何从该字符串中获取真实的、有形的值？
如果您查看 make_letter(); 函数，您会发现它依赖于从 charAt(); 接收的值的比较。因此，如果遇到 space，我需要能够将它与我在对象中设置的值进行比较，但是如何将空白 space 与另一个值进行比较？除了 charAt(); 之外还有什么我应该使用的吗？
您实质上是在尝试将字符映射到它们的名称和 ' '.toLowerCase() !== 'spc' 的结果。名称错误，导致抛出异常
将 spc 键更改为 ' ' 可修复错误，如 you can see here.
I believe the problem lies with how charAt is handling the spaces. As you can see I've tried to log the value returned from charAt(); in the console, however when it finds the space, it just returns a blank space.
是的，这就是工作。 charAt 为您提供给定位置的字符。
How can I get a real, tangible value from this string when it finds a space?
您可以使用charCodeAt获取字符代码。
Thus if a space is encountered, I need to be able to compare it to values I have set in an object, but how do you compare a blank space against another value?
比较 space 没有什么特别之处。但是， 使用 space 作为 属性 名称有一些特别之处，正如您可能希望在 inv 对象中那样。最后你有：
spc: []
...创建一个名为 spc 的 属性。当然，这与 space 不同。如果您愿意，您 可以 创建一个带有 space 的 属性：
" ": []
同样，没有任何 charAt 给你匹配这个：
exc: [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
我不知道 exc 是什么意思，但如果是 !，那么：
"!": [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
您可以在对象初始值设定项中使用 任何 字符串作为 属性 名称，只需将其放在引号中即可。
只需替换
spc: []
和
' ': []
我正在制作一个将文本字符串转换为图形字母的新闻行情。这些字母是使用 canvas 绘制的。创建字母的函数除了一件事外工作完美：它无法处理我传递给它的字符串中的 spaces。
下面是将字符串转换为图形形式的函数：
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"，但是当它到达 space 时它会停止。 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 如何处理 spaces。如您所见，我尝试在控制台中记录从 charAt(); 返回的值，但是当它找到 space 时，它只是 returns 一个空白 space。当它找到 space 时，如何从该字符串中获取真实的、有形的值？
如果您查看 make_letter(); 函数，您会发现它依赖于从 charAt(); 接收的值的比较。因此，如果遇到 space，我需要能够将它与我在对象中设置的值进行比较，但是如何将空白 space 与另一个值进行比较？除了 charAt(); 之外还有什么我应该使用的吗？
您实质上是在尝试将字符映射到它们的名称和 ' '.toLowerCase() !== 'spc' 的结果。名称错误，导致抛出异常
将 spc 键更改为 ' ' 可修复错误，如 you can see here.
I believe the problem lies with how
charAtis handling the spaces. As you can see I've tried to log the value returned fromcharAt();in the console, however when it finds the space, it just returns a blank space.
是的，这就是工作。 charAt 为您提供给定位置的字符。
How can I get a real, tangible value from this string when it finds a space?
您可以使用charCodeAt获取字符代码。
Thus if a space is encountered, I need to be able to compare it to values I have set in an object, but how do you compare a blank space against another value?
比较 space 没有什么特别之处。但是， 使用 space 作为 属性 名称有一些特别之处，正如您可能希望在 inv 对象中那样。最后你有：
spc: []
...创建一个名为 spc 的 属性。当然，这与 space 不同。如果您愿意，您 可以 创建一个带有 space 的 属性：
" ": []
同样，没有任何 charAt 给你匹配这个：
exc: [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
我不知道 exc 是什么意思，但如果是 !，那么：
"!": [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
您可以在对象初始值设定项中使用 任何 字符串作为 属性 名称，只需将其放在引号中即可。
只需替换
spc: []
和
' ': []