javascript - js字符串中变量 - js字符串中引用变量




在JavaScript中创建多行字符串 (20)

我在Ruby中有以下代码。 我想将此代码转换为JavaScript。 什么是JS中的等效代码？ 

text = <<"HERE"
This
Is
A
Multiline
String
HERE

ES6更新：

正如第一个回答提到的那样，使用ES6 / Babel，你现在可以简单地使用反引号来创建多行字符串： 

const htmlString = `Say hello to 
multi-line
strings!`;

插值变量是一种流行的新功能，它带有反向划分的字符串： 

const htmlString = `${user.name} liked your post about strings`;

这只是简化为串联： 

user.name + ' liked your post about strings'

原ES5答案：

Google的JavaScript样式指南建议使用字符串连接而不是转义换行符：

不要这样做： 

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

在编译时无法安全地剥离每行开头的空格; 斜杠后的空格会导致棘手的错误; 虽然大多数脚本引擎支持这一点，但它不是ECMAScript的一部分。

请改用字符串连接： 

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';

更新：

ECMAScript 6（ES6）引入了一种新的文字，即模板文字 。 它们具有许多特征，其中包括可变插值，但最重要的是，对于这个问题，它们可以是多线的。

模板文字由反引号分隔： 

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

（注意：我不主张在字符串中使用HTML）

浏览器支持是可以的 ，但您可以使用transpilers更兼容。

原ES5答案：

Javascript没有here-document语法。 但是，你可以逃避文字换行符，它接近： 

"foo \
bar"

javascript中的等价物是： 

var text = `
This
Is
A
Multiline
String
`;

这是specification 。 请参阅本页底部的浏览器支持。 这里有一些examples 。

Downvoters ：此代码仅供参考。

这已经在Mac上的Fx 19和Chrome 24中进行了测试

DEMO 

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          $text
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

你可以这样做... 

var string = 'This is\n' +
'a multiline\n' + 
'string';

使用脚本标签：

  • 将包含多行文本的<script>...</script>块添加到head标记中;

  • 按原样获取多行文本...（注意文本编码：UTF-8，ASCII） 

    <script>

    // pure javascript
    var text = document.getElementById("mySoapMessage").innerHTML ;

    // using JQuery's document ready for safety
    $(document).ready(function() {

        var text = $("#mySoapMessage").html(); 

    });

</script>

<script id="mySoapMessage" type="text/plain">

    <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
       <soapenv:Header/>
       <soapenv:Body>
          <typ:getConvocadosElement>
             ...
          </typ:getConvocadosElement>
       </soapenv:Body>
    </soapenv:Envelope>

    <!-- this comment will be present on your string -->
    //uh-oh, javascript comments...  SOAP request will fail 


</script>

如果您恰好在Node中运行，则可以使用fs模块从文件中读取多行字符串： 

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

如果您愿意使用转义换行符，可以很好地使用它们。 它看起来像带有页面边框的文档 。

您可以在纯JavaScript中使用多行字符串。

此方法基于函数的序列化，该函数被定义为依赖于实现 。 它在大多数浏览器中都可以工作（见下文），但不能保证它将来仍能使用，所以不要依赖它。

使用以下功能： 

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

你可以在这里 - 像这样的文件： 

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

该方法已在以下浏览器中成功测试过（未提及=未测试）：

  • IE 4 - 10
  • Opera 9.50 - 12（不是9-）
  • Safari 4 - 6（不是3-）
  • Chrome 1 - 45
  • Firefox 17 - 21（ 不是16- ）
  • Rekonq 0.7.0 - 0.8.0
  • Konqueror 4.7.4不支持

但是要小心你的缩放器。 它往往会删除评论。 对于YUI压缩器 ，以/*!开头的注释/*! （就像我用的那个）将被保留。

我认为真正的解决方案是使用CoffeeScript 。

您可以使用TypeScript （JavaScript SuperSet），它支持多行字符串，并转换回纯JavaScript而不会产生任何开销： 

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

如果您想使用纯JavaScript完成相同的操作： 

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

请注意，iPad / Safari不支持'functionName.toString()'

如果你有很多遗留代码，你也可以在TypeScript中使用普通的JavaScript变体（用于清理）： 

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

并且您可以使用普通JavaScript变体中的多行字符串对象，您可以将模板放入另一个文件（可以在捆绑包中合并）。

您可以尝试使用TypeScript
TypeScript

您必须使用连接运算符“+”。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

通过使用\n您的源代码将看起来像 -

This 
 <br>is
 <br>multiline
 <br>string.

通过使用<br>您的浏览器输出将看起来像 -

This
is
multiline
string.

我喜欢这种语法和压句： 

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

（但实际上不能被视为多行字符串）

我很惊讶我没有看到这个，因为它适用于我测试过的所有地方，对于例如模板非常有用： 

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

有没有人知道有HTML的环境但它不起作用？

我想出了这种多线式弦乐器的装配方法。 由于将函数转换为字符串也会返回函数内的任何注释，您可以使用多行注释/ ** /将注释用作字符串。 你只需要修剪两端，你就有了你的字符串。 

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)

我认为这个解决方法应该适用于IE，Chrome，Firefox，Safari，Opera -

使用jQuery：

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

使用纯Javascript： 

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

干杯！！

我通过输出div，使其隐藏，并在需要时通过jQuery调用div id来解决这个问题。

例如 

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

然后，当我需要获取字符串时，我只使用以下jQuery： 

$('#UniqueID').html();

这会在多行返回我的文字。 如果我打电话 

alert($('#UniqueID').html());

我明白了：

有这个图书馆让它美丽：

https://github.com/sindresorhus/multiline

之前 

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

后 

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

模式text = <<"HERE" This Is A Multiline String HERE在js中不可用（我记得在我很好的旧Perl时代使用它）。

为了保持对复杂或长多行字符串的监督，我有时会使用数组模式： 

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

或者匿名模式已经显示（转义换行符），这可能是代码中一个丑陋的块： 

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

这是另一个奇怪但有效的'技巧' 1 ： 

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

外部编辑： jsfiddle

ES20xx支持使用模板字符串跨多行生成字符串 ： 

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

1注意：在缩小/混淆代码后，这将丢失

这适用于IE，Safari，Chrome和Firefox： 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

刚刚尝试了Anonymous的答案，发现这里有一个小技巧，如果反斜杠\
后面有空格则不起作用所以以下解决方案不起作用 -

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

但是当空间被移除时它起作用 - 

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

希望能帮助到你 ！！




字符串   js字符串中引用变量   js字符串中变量   js字符串   js多行字符串   js原始字符串   js三引号   jquery多行字符串   javascript多行文本   es6多行字符串   javascript   string   multiline   heredoc  


heredoc