Javascript：字符串字符的行
Posted
技术标签:
【中文标题】Javascript：字符串字符的行【英文标题】：Javascript: Rows of string characters 【发布时间】：2016-02-21 00:48:25 【问题描述】：所以我正在尝试创建一个函数，它将第一个输入作为数字，将第二个输入作为字符串。然后该函数应使用第二个输入的字符更改 div 的 innerhtml。例如。如果第一个输入是数字 2，第二个输入是 hello，则 innerHTML 应更改为：
h
ee
如果第一个是 5 号，其他都一样：
h
ee
lll
llll
ooooo
我知道我必须使用 str.charAT 和可能的 for 循环（可能是任何循环），但似乎无法在我的脑海中拼凑起来。我已经坚持了 6 个小时，我不知道该怎么做。所以我在这里寻求帮助XD，请帮助我！如果有任何提示，我很乐意接受，这只是帮助我习惯 js 的随机练习。如果您也想给出完整的建议，我的意思是，考虑到我可以从中学习，它的帮助不仅仅是提示。
数字不能超过字符串中的字符数。到目前为止，这里是我制作的 html 和 javascript。
<html>
<head>
<script src="q2.js" type="text/javascript"></script>
</head>
<body>
<div> Input1<input id="input1" type="text"></div>
<div> Input2<input id="input2" type="text"></div>
<div> Result<div id="result"></div></div>
<button onclick="compute()">Compute</button>
</body>
<html>
JAVASCRIPT：
function compute()
var n = Number(document.getElementById("input1").value);
var v = document.getElementById("input2").value;
var answer = document.getElementById("result");
var i,j;
answer.innerHTML = "";
if(n)
else
alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
if(n>v.length)
alert("number 1 bigger than word 2");
for(i=0;i<n;i++)
for(j=0;)
【问题讨论】：
你的代码有语法错误，看了一下，好像没试过，这样评价公平吗？ @JaromandX 对我有用吗？我没有看到任何错误，除非您认为我在考虑循环代码时失败的尝试是错误 XD，我的意思是，如果您的意思是外观很糟糕，那么您可能是对的，我想知道如何使它看起来不错或其他任何东西。跨度>for(j=0;) 是一个错误
@JaromandaX XD 抱歉，如果我不够清楚，那是我尝试创建一个可行的循环失败的一部分，我只是停在那里，因为我知道我在做什么不会工作，如果我让它工作，它最多会给我一行等量的字符，就像我想的那样。
这看起来像是我的家庭作业...
【参考方案1】：
这可以满足你的需要，但是它可能会使用一些你不熟悉的数组函数
function compute()
var n = Number(document.getElementById("input1").value);
var v = document.getElementById("input2").value;
var answer = document.getElementById("result");
if (!n)
alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
if (n > v.length)
alert("number 1 bigger than word 2");
answer.innerHTML = [].slice.call(v, 0, n).map(function(letter, index)
return new Array(index+2).join(letter);
).join('<br />');
slice - 我们只需要前 n 个字符
map - 对于每个字符，运行回调函数
callback 函数创建一个比当前索引大 2 的空数组（基于 0 的索引）
在字母上加入这个数组 - 产生索引 + 1 个字母
映射的数组由<br /> 加入
结果输出到answer.innerHTML
ES2015 (ES6) 中的 answer.innerHTML 代码将是
answer.innerHTML = [].slice.call(v, 0, n).map((letter, index) => letter.repeat(index+1)).join('<br />')
【讨论】：
+1 的好答案，虽然看起来 OP 需要家庭作业的帮助，所以对于当前的作业来说可能太复杂了：p Split and slice 有一个很好的头韵！[].reduce.call(v, ...) 也可以。
我意识到答案可能高于他的体重等级，但我认为这比嵌套循环和 charAt 更正确
@Malk - 我也可以使用 ES2015 的代码：p - 你的方法将意味着回调中的更多逻辑：p
应该这样做，宣扬新标准。欢呼 ES2015！ p.s.我很高兴你没有把它称为 ES6【参考方案2】：
使用嵌套for循环和charAt的答案
function compute()
var n = Number(document.getElementById("input1").value);
var v = document.getElementById("input2").value;
var answer = document.getElementById("result");
var i, j, c, s = "";
if (n)
else
alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
if (n > v.length)
alert("number 1 bigger than word 2");
for (i = 0; i < n; i++)
c = v.charAt(i);
if (i > 0)
s += "<br />";
for (j = 0; j <= i; j++)
s += c;
answer.innerHTML = s;
【讨论】：
哇，这似乎要容易得多，然后我认为它必须使用循环。非常感谢！！！！ :D 这让我理解了 for 循环的一部分，这让我有一阵子难以置信（我怎么没想到这一点很愚蠢，但是......）一旦一个函数实现了它的目的，它就消失了直到它再次被回调，但是当它再次被回调时，第一个语句也是如此（即在此 j for 循环的第一个语句是 j=0）所以这里的变量 j 基本上在每次调用循环时重置为 0 .非常感谢老兄！我的意思是我可能很愚蠢，不知道这样的基本概念，但这只是意味着如果没有这个帮助，我就不会弄明白！【参考方案3】：function compute()
var n = Number(document.getElementById("input1").value);
var v = document.getElementById("input2").value;
var answer = document.getElementById("result");
if (!n)
alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
if (n > v.length)
alert("number 1 bigger than word 2");
var res ="";
for(var i=1; i<=v.length; i++)
res = res +"\n"+ Array(i+1).join(v.charAt(i));
answer.innerHTML = res;
如果您认为此答案有用、有效或错误，请发布您的 cmets 或单击向上/向下箭头。只是为了进一步提高自己。
【讨论】：
以上是关于Javascript：字符串字符的行的主要内容，如果未能解决你的问题，请参考以下文章